jQuery Delaying Queue

Question

I want to delay things like the css from happening but this method wont work. Any ideas on how I can delay tasks.

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

Answer 1

You can use .queue() to stick it on the default animation (fx) queue, like this:

$('.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, all this does is stick it in the fx queue using .queue(function(n)), the n is the next function in the queue, so we're calling it, for example if you didn't do this and added any animation after it, it just wouldn't run, because the next function or .dequeue() isn't called.

Answer 2

Maybe use a callback function on the animate. Once the animation is complete use a setTimeout()

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

This might not be syntactically perfect.