jQuery 自定义队列

Question

我正在尝试做的是隔离动画，这样我就可以在不影响重要的情况下杀死某些动画。我正在尝试将 mouseenter/mouseleave 动画添加到队列中，以便在不同的动画开始时杀死它们。下面的代码不会停止排队的动画。它的行为类似于动画将在队列中建立并播放的默认设置。什么给了？

$('.item').mouseenter(function(){
    $(this).clearQueue("test");
    $(this).queue("test",function(next){        
        $(this).animate({
            height: '250px'
        },500);
    });
    $(this).dequeue("test");
}).mouseleave(function(){
    $(this).clearQueue("test");
    $(this).queue("test",function(next){        
        $(this).animate({
            height: '140px'
        }, 250);
    });
    $(this).dequeue("test");
})

Answer 1

这是因为您在 "test" 队列中运行的函数立即完成，所以结果是您立即将内容添加到 fx （默认动画）队列，您的"test" 队列始终为空。

它只有在调用.dequeue() 之前有一个项目...然后fx 队列有一个新条目，该队列不断构建并且那个队列你永远不会清除。它是这样的：

• $(this).clearQueue("test"); - 这个队列已经是空的了
• $(this).queue("test", ...); - 将项目添加到 test 队列
• $(this).animate({... }); - 在fx 队列中排队动画
• $(this).dequeue("test"); - 启动test 队列，该队列立即清空，因为.animate() 立即返回。