jquery элемент fadeOut, addClass (пока скрытый), элемент повторного отображения

#jquery #delay #fadein #addclass

#jquery #задержка #fadein #добавить класс

Вопрос:

Я ищу некоторую помощь в достижении следующего:

когда документ будет готов..

найдите и скройте указанный div из DOM, пока он не отображается / для отображения установлено значение ‘none’, добавьте класс ‘img2’. После добавления класса к исходному селектору, снова введите div fade. (отображение:блок)

Как я могу объединить эти следующие методы в цепочку в указанном порядке?

В настоящее время любой метод ‘addClass’ запускается, как только DOM готов, а не после последовательных событий.

 /*
select div, 
wait 2 secs., 
fade out for 1, 
add class 'img2' (which changes background-image property / style), 
re-display (display:block) selected element. (#bg-img).
*/
$('#bg-img').delay(2000).fadeOut(1000).addClass('img2');

Ответ №1:

jQuery.fadeOut поддерживает обратный вызов кода, который должен быть применен после завершения эффекта:

 $('#bg-img').delay(2000).fadeOut(1000, function() {
  $(this).addClass('img2');
});

Обновить

Как совершенно справедливо указывает @mdm, вы можете передать аргумент обратного вызова для всех анимационных эффектов jQuery.

1. Это относится и к другим методам анимации — fadeTo, fadeIn, slideToggle, slideUp и slideDown.

2. Это идеально. Именно то, что я ищу — (я должен был это знать.) Спасибо, что уделили мне время. Приветствия!

Ответ №2:

попробуйте с

 $('#bg-img').delay(2000).fadeOut(1000, function () {
   $(this).addClass('img2');
 });