Search code examples
javascriptjqueryfadeinfadeout

Javascript fadeIn/fadeOut "stacking"

Trying to get a simple fadeIn/fadeOut work the way I want, basically, my problem is that it won't overwrite, or stop the function, if I've hovered over another element that triggers the action, and it kind puts it in a queue, and will play all the animations, even after my mouse is not even near the elements. I would like it to not let the function trigger again, unless the fadeout has been finished.

$("p").hover(
function() 
{
    $(document.getElementById('Bottom_Menu')).fadeIn(200);
},
function() 
{
    $(document.getElementById('Bottom_Menu')).fadeOut(350);
});
Solution

  • To quickly answer your question, you can use stop().

    $("#Bottom_Menu").stop().fadeTo(200, 1);

    You don't have to use document.getElementById; instead, just use #id. For classes, use .class. It's all built in to jQuery. :)

    UPDATE

    I'm now using fadeTo instead of fadeIn, because fadeIn only works when display is none. So if we're canceling the previous animation with stop(), we need to use fadeTo, since the display may not be none. (When you use fadeOut, it fades out the element, and when complete, it sets the element's display to none, which hides the element.)

    Notes:

    The second property of fadeTo is opacity. fadeTo, like fadeIn, still automatically changes the display property so the element is visible.