Если функция anquid () jquery установлена ​​после animate (), она не работает?

Question

Сначала у меня есть анимация iframe с идентификатором "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 () после animate () не работает? Я что-то пропустил?

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);

});