javascript - 如果在 animate() 之后设置 hide() jquery animate 函数，它不起作用？

Question

首先我有一个 iframe 的动画，它的 id 是“test”

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

然后我想要动画化它并隐藏它，像在 MacOS 中一样产生关闭效果:

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

但是好像iframe是不能隐藏的，不过如果我把它写在animate的回调函数里，也就是上面注释的代码，又可以了。

Here is online case

所以我想知道为什么 animate() 之后的 hide() 不起作用？我错过了什么吗？

Answer 1

为了回答您的问题，对 .hide() 的调用是在调用 .animate() 之后立即执行的，因此.hide() 调用实际上发生在 动画完成之前，(.animate() 异步运行)——这就是 jQuery 提供回调的原因功能，以便您可以在动画完成时收到通知。

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

在 jsFiddle 上为您保存了这个也是