jQuery two sequencial animations not working

Question

Got this pre-animation, and an alert popping up after 2 seconds. This works:

$('.tableContent').find('.turnEditPanel').animate({'height': 36}, 300).delay(1000).queue(function() {                   
   alert("HI");
 });

Now when I change the alert by other animation, affecting right the same div in order to revert the animation, it seems like it does not identify it or s.thing, as nothing happens..:

$('.tableContent').find('.turnEditPanel').animate({'height': 36}, 300).delay(1000).queue(function() {                   
   $('.tableContent').find('.turnEditPanel').animate({'height': 0}, 300);
 });

This neither works with (this):

$('.tableContent').find('.turnEditPanel').animate({'height': 36}, 300).delay(1000).queue(function() {                   
       $(this).animate({'height': 0}, 300);
     });

Answer 1

I'm not sure why you're using .queue, but you should probably just chain the event, or use the complete callback on the first call to .animate() instead.

Example using chaining:

$('.tableContent').find('.turnEditPanel').animate({'height': 36}, 300).delay(1000).animate({'height': 0}, 300);

Example using the complete callback:

$('.tableContent').find('.turnEditPanel').animate({'height': 36}, 300, function() {
  $(this).delay(1000).animate({'height': 0}, 300);
});

Update

As A. Wolff mentioned in his comment, alert('HI') works in queue() but animate() does not because calling animate inside queue callback will put it into the animation queue, but it won't be run until you call the next item in the queue, for example:

.queue(function(next) {
    $(this).animate({'height': 0}, 300);
    next();
}); 

//next is shorthand for dequeue('fx'). "fx" is name of the default queue created by jQuery.