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队列(除非您专门指定其他队列).请记住，链接和排队是2个截然不同的概念，链接继续使用相同的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()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！