click() and setTimeout issue

Question

I have a message panel at the bottom of my page which I display by applying a negative margin. When it opens, I would like it to either (whichever first):

Close when user clicks on #panel-close (this is on the panel, so only visible when it is open)

OR
Close after 6 seconds

The code I have works until I start opening and closing it repeatedly - then the timing goes wrong. I believe I need to cancel the setTimeout if i have closed the panel with a click, but i can't get this to work.

$("#button").click(function() {
    messagePanel.animate({
        marginTop: '-50px' //open
    }, 600 );

    setTimeout(function(){
        messagePanel.animate({
            marginTop: '0px' //close
        }, 600 );
    },6000)

});

$('#panel-close').click(function() {
    messagePanel.animate({
        marginTop: '0px' //close
    }, 600 );
});

Any help appreciated!

http://stackoverflow.com/questions/3015319/jquery-javascript-settimeout-cleartimeout — mplungjan, Nov 26 '11 at 09:42

score 0 · Accepted Answer · answered Nov 26 '11 at 09:50

0

If you need to cancel the setTimeout event, you need to get the timeoutID return by setTimeout function, eg.

var timeoutId;
timeoutId = setTimeout(function () {...});
$('#panel').click(function() {
   clearTimeout(timeoutId);
}

see https://developer.mozilla.org/en/DOM/window.clearTimeout for more detail

answered Nov 26 '11 at 09:50

number5

15,913
3
54
51

you might also want the notice to stay open while the mouse is over it, in case someone clicks on the link just as it disappears, and accidently clicks something under the notice instead. to do that, add an onmouseover event to the notice that clears the timeout and an onmouseout event which re-sets it – Kae Verens Nov 26 '11 at 13:46
@KaeVerens - Thanks for your suggestion - yes i definitely want that too - but i'm not having any luck. How would you suggest I go about it? – Nicole Harris Nov 28 '11 at 09:02

click() and setTimeout issue

1 Answers1