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

【问题标题】：if the hide() jquery animate function set after animate(),it doesn't work?如果在 animate() 之后设置了 hide() jquery animate 函数，它不起作用？
【发布时间】：2011-01-01 11:34:21
【问题描述】：

首先我有一个 id 为“test”的 iframe 动画

<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() 不起作用？我错过了什么吗？

【问题讨论】：

标签： javascript jquery hide jquery-animate

【解决方案1】：

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

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

在jsFiddle 上也为你保存了这个

【讨论】：

谢谢。但现在问题不在于持续时间，或“正确的 Dom 元素”。在我上面的代码中，如果我写“……},function(){$(this).hide ();}"直接，也可以。问题是为什么"animate().hide()"不起作用？
@hh54188 我很久以前就编辑了我的答案。请看一下并告诉我您的想法。
@hh54188 因为异步执行？
@Jacob Relkin：对不起，我才注意到你编辑了。非常感谢。我之前没有注意到存在异步执行过程。我知道了:)跨度>

【解决方案2】：

将opacity 设置为hide 即可：

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

});

【讨论】：

@Saturo.Logic，这很好，但它实际上并没有完全隐藏iframe，因为它的display CSS 属性仍然是block。
@Jacob 是visibility:hidden和display:none的区别吗？
@Saturo.Logic 是的，有区别。