If the hide () jquery animation function installed after animate () doesn't work?

Question

First I have an animated iframe whose id is "test"

<iframe id="test" src=""></iframe> 

then I want to animate it and hide it, make a close effect, like in MacOS:

 $('#test').animate({ 'width':0, 'height':0, 'top':$('input').offset().top, 'left':$('input').offset().left },function(){ //$(this).hide(); }).hide(); 

but it seems that the iframe cannot be hidden. However, if I write it in the callback function, which is in the animation, which is the annotated code above. This may work again.

Here is an online example

So, I am wondering why hide () after animate () does not work? Did I miss something?

Answer 1

To answer your question, the .hide() call is executed immediately after the .animate() call, so the .hide() call really takes place before the animation finishes, ( .animate() is executed asynchronously) - this is why jQuery provides a callback function, so that you can be notified when animations complete.

 $('#test').animate({ 'width':0, 'height':0, 'top':$('input').offset().top, 'left':$('input').offset().left }, function(){ $("#test").hide(); }); 

Saved this for you on jsFiddle too

Answer 2

Set opacity to hide and it will work:

 $('#mask').click(function () { $('#mask').fadeOut(500); $('#test').animate({ opacity: 'hide', 'top':$('input').offset().top, 'left':$('input').offset().left, },3000); });