delay() 和fadeOut() 不会延迟队列中的attr()

问题描述

这段代码有什么问题?我正在尝试获得这种效果:fadeOut(500) 和 attr('class','myClass') 延迟 600 毫秒.. 然后 delay(600) 和 fadeIn(500).延迟发生正确但 attr() 没有被延迟，它在 #myDiv 仍然消失时触发！:'(

what is wrong in this code? I'm trying to get this effect: fadeOut(500) and attr('class','myClass') delayed by 600 millisecs.. then delay(600) again, and fadeIn(500). The delays happen correctly but the attr() is not being delayed, it fires when #myDiv is still fading! :'(

$('#myDiv').fadeOut(500)
           .delay(600)
           .attr('class','myClass')
           .delay(600)
           .fadeIn(500);

推荐答案

.delay() 仅影响动画或 fx 队列(除非您专门指定不同的队列).请记住，链接和排队是两个截然不同的概念，链接继续使用相同的 jquery 集，但这与该集合中元素上的任何事件队列完全不同.

The .delay() only affects the animation or fx queue (unless you specify a different queue specifically). Keep in mind that chaining and queuing are 2 distinctly different concepts, chaining continues the use of the same jquery set, but that's a different thing entirely than any event queues on elements in that set.

要使 .attr() 调用受到影响，您需要使用 .queue() 将其添加为同一队列的回调，像这样:

To have the .attr() call affected, you have to add it as a callback to that same queue using .queue(), like this:

$('#myDiv').fadeOut(500)
           .delay(600)
           .queue(function(next) { $(this).attr('class','myClass'); next(); })
           .delay(600)
           .fadeIn(500);

还要注意有.addClass()、.removeClass() 和 .toggleClass() 可用的方法可能会使这更清晰 :)

Also note there are .addClass(), .removeClass() and .toggleClass() methods available that may make this a bit cleaner :)

这篇关于delay() 和fadeOut() 不会延迟队列中的attr()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！