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.
Add a comment |
3 Answers
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/
Comments
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/
1 Comment
red-X
@powerbuoy was just adding them myself but thanks for the trouble :D
Here you go with modifying your jQuery a little..
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});}); });});
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}); }); });
