jQuery 自定义队列
我想做的是隔离动画，这样我就可以杀死某些动画而不影响重要的动画。我正在尝试将 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");
})
What I'm trying to do is segregate animations so I can kill certain ones without effecting the important ones. I am trying to add the mouseenter/mouseleave animations to a queue so I can kill them when a different animation starts. The code below does nothing to stop the queued animations. It behaves like the default where the animations will build up in the queue and play out. What gives?
$('.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");
})
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是因为您在
“test”队列中运行的函数立即完成，因此结果是您立即将内容添加到fx（默认动画）队列，您的“test”队列始终保持为空。它仅在调用
.dequeue()之前有一个项目。 ..然后fx队列有一个新条目，该队列不断构建并且该队列您永远不会清除。它是这样的：$(this).clearQueue("test");- 这个队列已经是空的$(this).queue("test", ...);< /code> - 将项目添加到test队列$(this).animate({... });- 在fx上排队动画 code> queue$(this).dequeue("test");- 启动test队列，该队列自.animate()后立即清空> 立即返回。It's because the functions you're running in the
"test"queue complete immediately, so the result is that you're instantly adding things onto thefx(default animation) queue, your"test"queue remains empty the entire time.It's only has an item in it just before calling
.dequeue()...then thefxqueue has a new entry, that queue keeps building and that queue you're never clearing. It goes like this:$(this).clearQueue("test");- this queue was already empty$(this).queue("test", ...);- add item to thetestqueue$(this).animate({... });- queue up animation on thefxqueue$(this).dequeue("test");- start thetestqueue, which is immediately emptied since.animate()returns instantly.