CODEWITHSUNDEEP
jquery
sscirrus
sscirrus

Reputation: 56739

fadeOut contents than slideToggle element itself

I'm trying to first do a .fadeOut() on a div's contents, then I'd like to .slideToggle() the div shut. I've tried a couple of things:

$('#followUp').contents().fadeOut(650);
$('#followUp').delay(650).slideToggle();

$('#followUp').contents().fadeOut(function(){
    $('#followUp').delay(650).slideToggle();
})

Neither of the above are working. How can I get this to work please? Thank you!

Upvotes: 1

Views: 253

Answers (3)

Yoshi
Yoshi

Reputation: 54649

$.when(
  $('#followUp').css({
    height: $('#followUp').height()
  }).find('*').fadeOut(650)
).then(function () {
  $('#followUp').slideToggle();
});

Maybe?

Alternate version (with a little hint from zdrsh):

$('#followUp').css('height', '+=0px').children().fadeOut(650).promise().done(function () {
  $('#followUp').slideToggle();
});

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074585

Your first example mostly works if the markup within the "followUp" div consists of elements rather than just text nodes, but fails on Firefox because jQuery tries to call getComputedStyle on any text nodes. Rather than contents(), you want to use children() or use "#followUp *" as the selector (thank you scessor for pointing that out in the comments under his/her answer).

The problem with fading out the contents, though, is that unless you do something to counter it, the div will then be without height and snap shut rather than sliding shut as you wanted. My solution to that is to fade to nearly invisible but not quite:

So given:

<div id="followUp">
    <div>Contents</div>
    <div>Click anywhere on these contents to trigger the effect</div>
</div>

Then:

var followUp = $('#followUp');
followUp.children().animate({
  opacity: 0.1,
  duration: 650
});
followUp.delay(650).slideToggle();

Live example

(I wouldn't use your second example (the completion callback) because the completion callback will fire once for every element contained by the "followUp" div, which is clearly not what you want.)

Upvotes: 1

scessor
scessor

Reputation: 16115

Maybe this:

$('#followUp *').fadeOut(650);
$('#followUp').delay(650).slideToggle();

Also see this example.

Upvotes: 1

Related Questions