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() 后立即清空> 立即返回。