Question

I’m working on this website and have implemented JQuery’s animate() for the first time (on the navigation). It’s all working fine in the browsers that I have and whatnot, but I’ve noticed it seems to queue the animations. By this I mean, if you flick your mouse back and forward over the navigation quickly, the items will continue to jump up and down until the queue is empty.

Here’s my animate() stuff:

$(document).ready(function()
{
    // Navigation effects
    $("table#cat_752586 td").mouseover(function()
    {
        $(this).animate({
            marginTop: "0px",
            lineHeight: "60px"
        }, 350);
    });

    $("table#cat_752586 td").mouseout(function()
    {
        $(this).animate({
            marginTop: "20px",
            lineHeight: "36px"
        }, 350);
    });
});

What’s the easiest way to discard this feature from my navigation?

---

Just thought of something: the animation for rolling off still needs to queue after the one for rolling on in cases where you roll over the nav and roll off instantly.

Answer 1

You need to .stop() before .animate()

$(this).stop().animate({});

There are 2 parameters that .stop() takes which you may way to configure depending on if you want the animation to jump to the end and/or clear the queue. Usually a .stop(true) will suffice.

Edit: There is a combined mouseover/mouseout version which is cleaner.

$("table#cat_752586 td").mouseover(function() {
    $(this).stop(true).animate({
        marginTop: "0px",
        lineHeight: "60px"
    }, 350);
}).mouseout(function() {
    $(this).stop(true).animate({
        marginTop: "20px",
        lineHeight: "36px"
    }, 350);
});