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。

Answer 2

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

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

.stop()有两个参数可供您配置，具体取决于您是否希望动画跳转到最后和/或清除队列。通常.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);
});

JQuery动画排队

2 个答案: