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);  

- Luca

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()可用的方法，这可能会使代码更加简洁 :)

- Nick Craver

---

我认为你应该在函数内部调用$(this).dequeue()。从文档中可以看到：“请注意，当使用.queue()添加函数时，我们应确保最终调用.dequeue()，以便执行排队的下一个函数。” 无论如何+1;) - Felix Kling

@Felix - 哎呀，我通常是将此项作为队列中的最后一个项目进行调用的，你发现得好:) - Nick Craver

嗨，Nick，非常感谢你的回答。正如你所说，它确实有效，但是队列中的以下调用不再起作用了.. :(编辑：现在才看到Felix的评论..非常感谢你们两个人。 - Luca

@luca - 确保你正在尝试最新的答案...这是Felix在评论中指出的问题，现在应该可以工作了 :) - Nick Craver

感谢您发布这个问题，它帮助我解决了我的问题。 - Chris Hough

Answer 2

我们对这段代码的问题是，您在尝试执行不同的jQuery效果时没有使用队列函数，这是必要的。

例如，我们可以这样做：

$('some_element').faddeToggle(1000).delay(3000).css('some_style','value');

但是如果你有更多的话，应该按照一定的顺序来安排。

我的建议是：

$('#myDiv').fadeIn(4000)
        .delay(2000);
        console.log($($('#myDiv')).attr('id'));
        $('#myDiv').attr('class','myClass')  
 $('#myDiv').fadeOut(2000)
            .delay(3000).queue(function(){
            $('#myDiv').attr('class','newClass');
            var status = $('#myDiv').attr("class"); 
            console.log(status);
          });

这里还有关于类别如何改变的额外信息。希望对您有所帮助。

- delform_17