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

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

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

найдите и скройте указанный div из DOM, пока он исчезает/отображение установлено на «нет», добавьте класс «img2». После того, как класс добавлен к начальному селектору, снова добавьте div. (display: block)

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

В настоящее время любой метод 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');

jquery delay fadein addclass
person Michel Joanisse    schedule 08.04.2011    source источник

Ответы (2)


arrow_upward
6
arrow_downward

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

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

Обновить

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

person Gary Chambers    schedule 08.04.2011
comment
Это относится и к другим методам анимации — fadeTo, fadeIn, slideToggle, slideUp и slideDown. - person mdm; 08.04.2011
comment
Это потрясающе. Именно то, что я ищу - (Я должен был знать это.) Спасибо за ваше время. Ваше здоровье! - person Michel Joanisse; 08.04.2011

arrow_upward
2
arrow_downward

попробуй с

$('#bg-img').delay(2000).fadeOut(1000, function () {
   $(this).addClass('img2');
 });
person Faber    schedule 08.04.2011
comment
Спасибо @Fader, как упоминалось выше, именно то, что нужно. Ваше здоровье! - person Michel Joanisse; 08.04.2011