JQuery: Fading Out, Выполнение действия, затем Fading Back In

Question

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

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

function Reset() { 

    $formDiv.fadeOut(function() { 

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

Однако то, что происходит это, как ДИВ исчезает из, поля получить сброс, так что пользователь видит их все физически вернуться к их по умолчанию, пока он исчезает. Затем оно исчезает, как только оно заканчивается. Закрыть, но я не хочу, чтобы пользователь видел сброс полей. Я попробовал следующее, чтобы подождать до тех пор, пока 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/Затухание, но он работает, как ожидается (изменения выполняются, пока элемент невидим)

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

Answer 2

Посмотрите в .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 
    }); 
}); 

Answer 3

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

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

EDIT: После просмотра кода, он появляется (в 1.3.2, по крайней мере), что если вы передаете функции в качестве первого аргумента, он будет оценивать и использовать возвращаемое значение в качестве скорость. Если вы укажете скорость, то ваша функция обратного вызова будет работать так, как вы ожидаете. Элемент должен исчезнуть, тогда будет активирован обратный вызов, и будет выполнен сброс и исчезновение кода.

Answer 4

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

jQuery.stop().fadeOut() 

предотвратить очереди в FADEOUT анимации.

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

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