如何停止jQuery排队动画效果

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

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

所有这些操作是当有人将鼠标悬停在.category元素上时，横幅div会淡入和淡出。简单。我的问题是，由于我有大约十个ѭ1元素，如果有人过快或过快地在它们之间移动并且jQuery多次将它们排入同一动画，并不断使它们出现，请消失，直到被捕捉为止。有没有简单的方法可以阻止这种情况的发生？我看到了另一个建议在其中添加add3的问题，但这不起作用。如果我多次移动鼠标，动画将完全停止工作或只消失一半。提前致谢

已邀请:

2 个回复

坊岔埠绵

您可以将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
    });
});

jsfiddle上的代码示例

炉挤仙挟

当我实现最佳答案时，我的垂直滚动动画只是来回抖动。这很有用-W3 Schools Set Interval，语法： setInterval（函数，毫秒，param1，param2，...）我的参数形式为“ 8”，则将持续时间强制为零，并且仅查看了指导性参数。这为我工作：

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

编码愉快！另请参阅我对此文章的原始评论：如何同时运行两个jQuery动画？

要回复问题请先登录或注册

如何停止jQuery排队动画效果

2 个回复

发起人

jquery

jquery_animate

问题状态

如何停止jQuery排队动画效果

与内容相关的链接

2 个回复

发起人

jquery

jquery_animate

问题状态