CODEWITHSUNDEEP
javascriptjquery
ThomasReggi
ThomasReggi

Reputation: 59395

jQuery Delaying Queue

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

Upvotes: 1

Views: 193

Answers (2)

Mike Rifgin
Mike Rifgin

Reputation: 10747

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.

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630449

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.

Upvotes: 4

Related Questions