jQuery动画重复故障答案

【问题标题】：jQuery animation repeating glitchjQuery动画重复故障
【发布时间】：2010-09-13 15:27:08
【问题描述】：

我有一组输入，我想在悬停后更改它们的背景颜色，然后在鼠标移出后恢复为原始颜色。

它工作正常，有一个小故障。当我将鼠标悬停在这些输入上，取消悬停并再次快速悬停时，它们会在一段时间后闪烁。我该如何解决？

这是我的代码：

    $("input").hover(
    function(){
        $(this).animate({backgroundColor: '#fff'}, 800);
},  function(){
        $(this).animate({backgroundColor: '#666'}, 1400);
    });

（我不想更改动画时间）

我找到了一个可行的例子：

http://veerle.duoh.com/ - 检查搜索输入 - 当您将鼠标悬停并快速关闭鼠标时 - 它不会完成动画甚至闪烁。

【问题讨论】：

标签： jquery jquery-animate background-color

【解决方案1】：

嘿，你必须使用 stop() 函数来停止当前动画，否则 jquery 将在开始你的新动画之前完成动画堆栈（队列中的所有其他动画）......请参阅 jQuery queue() function 文档以了解 jQuery FX 的工作原理。 ..

    $("input").hover(
    function(){
        $(this).stop().animate({backgroundColor: '#fff'}, 800);
    },  function(){
        $(this).stop().animate({backgroundColor: '#666'}, 1400);
    });

请参阅jQuery stop() function docs。

【讨论】：

【解决方案2】：

这里有一个关于阻止 jQuery 生成动画的快速教程。我在很多场合都使用过这种技术。

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

【讨论】：