0

A DIV which it's content (another inner DIV) can be changed. I want to achieve the following effect:

  1. Fade out current content.

  2. Animate the height of DIV to fit the height of the new content.

  3. Fade in the new content.

2 Answers 2

1

You do not need to use delay. you can use done callback on animate

$('.p').css('height', oldH); // keeping parent from collapsing
$('.one').fadeOut(function(){
    $('.p').animate({"height": newH},{
        done: function(){
            $('.two').fadeIn();    
        }
    });

});
})

see the updated fiddle http://jsfiddle.net/WNS3B/2/

1

See this fiddle:

http://jsfiddle.net/WNS3B/

This is made possible using jquery and a fallback function of fadeOut method.

$('.one').fadeOut(function(){
    $('.p').css('height', oldH); // keeping parent from collapsing
    $('.p').animate({"height": newH});
    $('.two').delay(300).fadeIn();
});
3
  • Doesn't this only work when the divs being swapped are static? I don't think this helps the dynamic part.
    – sharf
    Jul 3, 2014 at 23:02
  • @user3669154 I think that you can get the height of a basic element even if it isn't in the DOM, but if it contains images etc, you are right.
    – ptvty
    Jul 3, 2014 at 23:06
  • I was thinking more of updating text/other content via ajax.
    – sharf
    Jul 3, 2014 at 23:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.