CODEWITHSUNDEEP
jqueryhtml
Andy
Andy

Reputation: 1432

Need one animated DIV to move another

http://jsfiddle.net/pC6fC/1/

I have two divs, one above the other. When the first animates, which it does, it slides below the other. How can I make sure that when the first animates it pushes the second downwards without having to animate both DIVs.

Upvotes: 0

Views: 580

Answers (3)

Kristaps Karlsons
Kristaps Karlsons

Reputation: 482

You could use margin, instead of top. As both of your divs are relatively positioned, if you set top value (i.e. 30%), it won't push your second div.

Example with margin-top: http://jsfiddle.net/pC6fC/5/

Upvotes: 4

Murtaza
Murtaza

Reputation: 3065

Here you go with modifying your jQuery a little..

  1. If you want the div to slide after your animation of box1 is completed.

    /* Slides down alert banner */
$(function(){
    $(".link").click(function(){
        $(".box1").animate({top:150}, 500, function () { $(".box2").css({top:150});});

    });

    });

  2. If you want the div to slide along with animation of box1.

    /* Slides down alert banner */
$(function(){
    $(".link").click(function(){
    $(".box1").animate({top:150}, 500);
    $(".box2").css({top:150});
    });
});

Upvotes: 0

red-X
red-X

Reputation: 5128

You can do this either by animating the margin-top instead of the top, or another idea would be to put them both into a parent div and animate that one.

example1: http://jsfiddle.net/pC6fC/8/

example2: http://jsfiddle.net/pC6fC/6/

Upvotes: 3

Related Questions