如果在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（）之后的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上也為你保存了這個

Answer 2

將opacity設置為hide ，它將起作用：

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

});