CODEWITHSUNDEEP
jqueryfunction
Craig Ward
Craig Ward

Reputation: 2485

jQuery functions being skipped after animation

I have the following piece of code which is being run from a click function. For some reason the the part that is animating down to 100px never runs the console.log or my_function() it skips anything you place in there. The part that animates upto 200px all runs fine. What gives?

if($(this).hasClass('open'))
{ 
  $(this).removeClass('open').addClass('closed');
  $(this).animate({'width': '100px'}, {queue:false, duration:150, easing: 'linear'}).delay(160, function (){
    //Nothing in here ever get run??
    console.log('closed');
    my_function();
  });
}
else
{
  $(this).removeClass('closed').addClass('open');
  $(this).animate({'width': '200px'}, {queue:false, duration:200, easing: 'linear'}).delay(210, function (){
    console.log('opened');
    my_function();
  });
}

Upvotes: 0

Views: 238

Answers (2)

bfavaretto
bfavaretto

Reputation: 71939

You should use a callback to .animate, instead of trying to use .delay. Try this:

$(this).animate({'width': '100px'}, 150, function (){
    console.log('closed');
    my_function();
});

Upvotes: 1

Kevin B
Kevin B

Reputation: 95048

$.fn.delay does not have a callback parameter.

http://api.jquery.com/delay/

Upvotes: 5

Related Questions