if the hide() jquery animate function set after animate(),it doesn't work?

Question

First I have a animate a iframe which id is "test"

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

then I want 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 the iframe can not be hide.However,if I write it in the callback function that in animate,which is the annotated code above.It could work again.

Here is online case

So I wonder why the hide() after animate() doesn't work?Do I miss something ?

Answer 1

To answer your question, the call to .hide() is performed immediately after the call to .animate(), so the .hide() invocation actually takes place before the animation completes, (.animate() runs asynchronously) - this is why jQuery provides the callback function to you so you can be notified of when the animation completes.

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

Saved this for you on jsFiddle too