Question

I have two divs: div1 and div2

I am trying to achieve an effect where div1 animates to being transparent and at the end of it, div2 slides down on top of it (replacing div1).

Here is what I tried (http://jsfiddle.net/RHSgf/4/):

div1.animate({
   opacity: 0.0
}, 2000, function () {
   $(this).replaceWith(div2.hide().slideDown(2000, 'linear', function () {}));
});

But at the end of div1’s animation, div2 isn’t sliding down so elegantly.

I don’t know why sliding down is so jerky. Thanks for any help in finding out the right way to do this.

Answer 1

Move slideDown out of replaceWith and it should work:

$(this).replaceWith(div2.hide());
div2.slideDown(2000, 'linear');

http://jsfiddle.net/elclanrs/RHSgf/5/