Question

我有一组输入，我希望在悬停后更改背景颜色，然后在鼠标移出后恢复原来的颜色。

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

这是我的代码：

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

（我不想改变动画时间）

我找到了一个有效的例子：

http://veerle.duoh.com/ - 检查SEARCH输入 - 当你悬停然后快速关闭鼠标时 - 它不会完成动画甚至闪烁。

Answer 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文档。

Answer 2

这是一个关于从动画构建中停止jQuery的快速教程。我曾多次使用过这种技术。

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

jQuery动画重复故障

2 个答案: