Question

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

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

所有这一切都是当有人在.category元素上盘旋时，横幅div淡入并淡出。简单。

我的问题是，因为我有大约10个.category元素，如果有人快速移动或关闭它们并且在同一个元素上移动多次jQuery将动画排队并不断让它们出现，消失直到它为止赶上。

是否有一种简单的方法可以阻止这种情况发生？

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

提前致谢

Answer 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

Answer 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?

如何阻止jQuery排队动画效果

2 个答案: