jquery + fadeOut element, addClass (while hidden), re-display element

Question

I'm looking for some help on achieving the following:

when document ready ..

locate and hide a specified div from DOM, while it's faded / display is set to 'none', add a class of 'img2'. After class is appended to initial selector, fade div back in. (display:block)

How can I chain these following methods in order specified?

Currently, any 'addClass' method, is initiated as soon as DOM is ready instead of after chained events.

/*
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');

Gary Chambers · Accepted Answer · 2011-04-08 13:54:55Z

6

jQuery.fadeOut supports a callback for code that should be applied after the effect has been completed:

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

Update

As @mdm quite rightly points out, you can pass a callback argument to all of the jQuery animation effects.

edited Apr 8, 2011 at 13:54

answered Apr 8, 2011 at 13:47

Gary Chambers

25.9k5 gold badges37 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mdm Over a year ago

This applies for the other animation methods too - fadeTo, fadeIn, slideToggle, slideUp, and slideDown.

Michel Joanisse Over a year ago

This is perfect. Exactly what I'm looking for - (I should have known this.) Thank you for your time. Cheers!

Faber · Accepted Answer · 2011-04-08 13:48:53Z

2

try with

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

answered Apr 8, 2011 at 13:48

Faber

2,2042 gold badges28 silver badges37 bronze badges

1 Comment

Michel Joanisse Over a year ago

Thank you @Fader, as mentioned above, exactly what was needed. Cheers!

Collectives™ on Stack Overflow

jquery + fadeOut element, addClass (while hidden), re-display element

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related