需要一个动画DIV来移动另一个

Question

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

我有两个div，一个在另一个之上。当第一个动画时，它会滑动到另一个下面。我怎样才能确保在第一个动画时它向下推动第二个动画而不必为两个DIV制作动画。

Answer 1

您可以使用保证金，而不是顶部。由于你的两个div都是相对定位的，如果你设置了最高值（即30％），它就不会推动你的第二个div。

margin-top的示例：http://jsfiddle.net/pC6fC/5/

Answer 2

您可以通过设置margin-top而不是top的动画来实现此目的，或者另一个想法是将它们都放入parent div并为该动画制作动画。

例1： http://jsfiddle.net/pC6fC/8/

例2： http://jsfiddle.net/pC6fC/6/

Answer 3

在这里，您可以稍微修改一下jQuery ..

1. 如果您想在完成box1的动画后滑动div。

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

   }）;

2. 如果您希望div与box1的动画一起滑动。

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