jQuery延迟队列

Question

我想延迟像css这样的事情发生，但这种方法不起作用。关于如何延迟任务的任何想法。

$(function() {
    $('.btn').click(function() {
    $('.divOne').animate({"left": "+=400px"}, "fast").delay(800).css("background-color","yellow");
    });
});      

Answer 1

您可以使用.queue()将其粘贴到默认动画(fx)队列中，如下所示：

$('.btn').click(function() {
  $('.divOne').animate({"left":"+=400px"}, "fast").delay(800).queue(function(n) {
    $(this).css("background-color","yellow");
    n(); //call next function in the queue, needed if you animate later!
  });
});

You can test it here，它所做的就是使用.queue(function(n))把它放在fx队列中，n是队列中的下一个函数，所以我们调用它，例如，如果你没有这样做，并在它后面添加了任何动画，它就不会运行，因为下一个函数或.dequeue()不会被调用。

Answer 2

可以在动画中使用回调函数。动画完成后，使用setTimeout()

$(function() {
    $('.btn').click(function() {
    $('.divOne').animate({"left": "+=400px"},"fast", function() {
        var $elem = $(this);
        setTimeout(function() {
            $elem.css('background-color','yellow');
        }, 800);
    })
});

这在语法上可能并不完美。