JQuery: исчезновение, выполнение действия, затем возвращение

Question

Итак, у меня есть то, что составляет HTML-форму, но не фактическое <form> само по себе. У меня есть кнопка «Очистить», которую я сейчас использую, чтобы восстановить все поля по умолчанию.

С эстетической точки зрения, я хотел бы, чтобы форма постепенно исчезала, сбрасывалась, пока она "ушла", и постепенно исчезала при полном сбросе. У меня есть этот код, чтобы попытаться достичь этого:

function Reset() {

    $formDiv.fadeOut(function() {

        // perform reset actions here
        $(this).fadeIn()
    });
}

Однако, что происходит, когда div исчезает, поля сбрасываются, поэтому пользователь видит, что все они физически возвращаются к значениям по умолчанию, пока он исчезает. Затем он возвращается обратно, как только заканчивает исчезать. Закрыть, но я не хочу, чтобы пользователь видел, как поля сбрасываются. Я попробовал следующее, чтобы дождаться завершения fadeOut для сброса полей, но я получил бесконечный цикл или что-то в этом роде (браузер сказал, что скрипт работает медленно и спросил, хочу ли я его остановить):

function Reset() {

    $formDiv.fadeOut(function() {

        while (!$(this).is(':animated')) {
            // perform reset actions here
        }

        $(this).fadeIn()
    });
}

Так что я не совсем уверен, куда идти отсюда. Любая помощь будет оценена. Благодаря.

Answer 1

В последнее время у меня была такая же проблема с fadeOut, которая, кажется, работает неправильно, и я нашел решение для нее:

$(this).animate({opacity:'0'},function(){

   //here changes to this element

   $(this).animate({opacity:'1'});
})

Выглядит так же, как fadeIn / fadeOut, но работает как положено (изменения сделаны, когда элемент невидим)

Я надеюсь, что некоторые из вас найдут это полезным.

Answer 2

Использование

jQuery.stop().fadeOut() 

для предотвращения очереди анимации fadeOut.

.stop() can be used to prevent queueing any jQuery Animation 

http://api.jquery.com/stop/

Answer 3

Обратный вызов действительно не должен срабатывать, пока анимация не завершится. Вы пытались установить скорость в fadeOut - документация (которая не всегда точна) показывает ее как обязательный параметр, и это может быть, если вы укажете обратный вызов - то есть она может оценивать функцию как скорость если вы не предоставите один явно.

$formDiv.fadeOut('fast', function() {
    // perform reset
    $(this).fadeIn();
});

РЕДАКТИРОВАТЬ : После просмотра кода, кажется (по крайней мере в 1.3.2), что если вы предоставите функцию в качестве первого аргумента, она будет оценивать ее и использовать возвращаемое значение в качестве скорость. Если вы указали скорость, то ваша функция обратного вызова должна работать так, как вы ожидаете. Элемент должен исчезнуть, затем сработает обратный вызов, и ваш код сброса и перехода будет выполнен.

Answer 4

Просмотр .delay

Более подробно: установите время, которое анимация займет для fadeOut (), и используйте задержку для анимации fadeIn (), которая больше времени анимации fadeOut. В этом примере действия сброса будут происходить во время анимации fadeOut и, вероятно, не будут длиться дольше 600 мс.

$formDiv.fadeOut(600,function() {

    // perform reset actions here
    $(this).delay(650).fadeIn()
});

Редактировать: К сожалению, неправильно понял проблему. Вы хотите, чтобы логика формы сброса была вызвана при вызове fadeIn (), а не fadeOut. Но я думаю, что все еще хорошо синхронизировать анимационные события. Попробуйте что-то вроде:

$formDiv.fadeOut(600,function() {
    $(this).delay(650).fadeIn(function() {
        // perform reset actions here
    });
});