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

Question

这段代码有什么问题？我试图获得这种效果:fadeOut(500)并且attr('class','myClass')延迟了600毫秒..然后delay(600)再次,和fadeIn(500).延迟发生正确,但attr()不会延迟,它会在#myDiv褪色时触发!:'(

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

Answer 1

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

要使.attr()呼叫受到影响,您必须将其作为回调添加到同一队列中.queue(),如下所示:

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

还要注意的还有.addClass(),.removeClass()和.toggleClass()可用的方法,可能使这个有点清洁:)