如何停止jQuery队列动画效果

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

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

当有人将鼠标悬停在

.category

元素上时，banner div会淡入淡出。简单

我的问题是，由于我有大约十个

.category

元素，如果有人在它们之间移动过快或过快，并且在同一个元素上多次使用jQuery对动画进行排队并不断使它们出现，那么就会消失，直到被捕获为止

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

我看到另一个问题，建议添加

.stop

，但这不起作用。如果我移动鼠标太多次，动画将完全停止工作，或者只淡入一半

---

提前感谢

您可以将

淡出

和

淡出

转换为使用

.animate（）

以及停止动画排队的选项

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

---

您可以将

淡出

和

淡出

转换为使用

.animate（）

和停止动画排队的选项

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

---

当我实现顶部答案时，我的垂直滚动动画只是来回抖动

这很有帮助，语法：

setInterval（函数、毫秒、参数1、参数2等）

使用形式为

{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);

快乐编码

---

另请参考我在这篇文章中的原始评论：

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

这很有帮助，语法：

setInterval（函数、毫秒、参数1、参数2等）

使用形式为

{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);

快乐编码

也请参考我在这篇文章上的原始评论：