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

Question

Мне нужна помощь по достижению следующего:

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

найти и скрыть указанный div из DOM, пока он блеклый/ display установлен в 'none', добавить класс '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');

Answer 1

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

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

Обновление

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

Answer 2

попробуй с

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