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

Question

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

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

Answer 1

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

边距顶部示例：http: //jsfiddle.net/pC6fC/5/

Answer 2

您可以通过设置动画margin-top而不是动画来做到这一点top，或者另一种想法是将它们都放入 aparent div并为其设置动画。

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

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

Answer 3

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

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

   /* 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});
       });
   });