In Jquery, how can I make a div smoothly slide down from A to B so that another div fades in A?

Question

I tried this:

$('#hidden_div').fadeIn();

But the div that I want to smoothly slide down, just teleports itself to its next position. (I want it to slide smoothly to it) Then this:

$('#sliding_div').animate({marginTop: '+=400px'},1000);
$('#hidden_div').fadeIn();

But I didn't get the right effect. How can you achieve that? Thanks in advance.

Answer 1

$('#sliding_div').animate({marginTop: '+=400px', opacity:1},1000);

和之前，将#sliding_div opacity设置为0

Answer 2

If I've understood the effect you're after, you need to fadeIn() the second div after the animate() has completed. You can use the callback parameter of animate() to do this:

$('#sliding_div').animate(
    { marginTop: '+=400px' },
    1000,
    function() {
        $('#hidden_div').fadeIn();
    }
);

Answer 3

这是一个更平滑的版本： http : //jsfiddle.net/W8AtL/4/

This fixes the jump from it being marginTop.