如何停止jQuery排队动画效果答案

【问题标题】：How to stop jQuery queuing animation effects如何停止jQuery排队动画效果
【发布时间】：2011-04-14 17:03:51
【问题描述】：

我有一个简单的 jQuery 悬停动画：

jQuery(function($) {
$('.category').hover(function(){
    $(this).find('.banner').fadeIn();
    },function(){
    $(this).find('.banner').fadeOut(400);
});
});

所有这些都是当有人将鼠标悬停在.category 元素上时，横幅 div 淡入淡出。很简单。

我的问题是，由于我有大约十个 .category 元素，如果有人在它们之间移动过快或离开并且多次在同一个元素上移动，jQuery 将动画排队并不断让它们出现，消失直到它被赶上.

有没有简单的方法来阻止这种情况发生？

我看到另一个问题，建议添加.stop，但这不起作用。如果我将鼠标上下移动太多次，动画将完全停止工作或仅淡入一半。

提前致谢

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

您可以将 fadeOut 和 fadeIn 转换为使用 .animate() 并选择停止动画排队。

$('.category').hover(function() {
    $(this).find('.banner').show().animate({
        opacity: "show"
    }, {
        queue: false
    });
}, function() {
    $(this).find('.banner').animate({
        opacity: "hide"
    }, {
        queue: false,
        duration: 400
    });
});

Code example on jsfiddle

【讨论】：

【解决方案2】：

当我实现最佳答案时，我的垂直滚动动画只是来回抖动..

这很有帮助 - W3 Schools Set Interval，语法：

setInterval(函数, 毫秒, param1, param2, ...)

让我的 { duration: 200, queue: false } 形式的参数强制持续时间为零，它只查看参数以获取指导。

这对我有用：

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

“autoScroll”在哪里：

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

编码愉快！

另请参阅我对这篇文章的原始评论：How to run two jQuery animations simultaneously?

【讨论】：