JQuery 动画排队

Question

我正在处理 this website并首次实现了 JQuery 的 animate()(在导航上)。在我拥有的浏览器中一切都工作正常，但我注意到它似乎对动画进行了排队。我的意思是，如果您在导航上快速前后滑动鼠标，项目将继续上下跳跃，直到队列为空。

这是我的 animate() 内容:

$(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);
    });
});

从导航中放弃此功能的最简单方法是什么？

<小时/>

刚刚想到一件事:如果您滚动导航并立即滚动，滚动动画仍然需要在滚动动画之后排队。

Answer 1

替换:

$(this).animate(...)

这样:

$(this).stop().animate(...)

这将在开始新动画之前停止任何正在运行的动画，从而有效地刷新队列。

参见the jQuery documentation .