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

Question

Итак, у меня есть то, что составляет html-форму, но, по сути, не является генеральным кодом. У меня есть кнопка «Очистить», которую я сейчас использую, чтобы восстановить значения по умолчанию для всех полей.

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

родовое слово

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

родовое слово

Поэтому я не совсем уверен, что делать дальше. Любая помощь будет оценена. Спасибо.

Answer 1

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

родовое слово

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

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

Answer 2

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

родовое слово

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

родовое слово

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

Answer 3

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

родовое слово

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

Answer 4

Посмотрите на .delay

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

родовое слово

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

родовое слово