JQuery 动画排队答案

【问题标题】：JQuery animate queuingJQuery 动画排队
【发布时间】：2011-08-10 23:29:29
【问题描述】：

我正在研究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);
    });
});

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

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

【问题讨论】：

标签： jquery queue jquery-animate

【解决方案1】：

替换：

$(this).animate(...)

用这个：

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

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

见the jQuery documentation。

【讨论】：

为了满足我在问题中添加的注释的要求（对不起）我是否只是在 .animate() 之一上实现这个？如果有，是哪一个？
我想你总是想要stop()。您添加的问题的含义是，即使我立即滚下，您也希望“开启”动画运行完成 - 我原以为您希望“关闭”动画立即替换它。有关示例，请参见 learningjquery.com/2009/01/…。
你说得对，在两者中都实施了 stop() 之后，我认为我对结果很满意。

【解决方案2】：

你需要在.animate()之前.stop()

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

.stop() 有 2 个参数，您可以根据您是否希望动画跳到末尾和/或清除队列来配置这些参数。通常.stop(true) 就足够了。

编辑：有一个更简洁的鼠标悬停/鼠标悬停组合版本。

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

【讨论】：

很棒的编辑，我一直忘记你可以链接这样的东西，我会尝试更多地使用它。