jquery - 別の DIV を移動するには、1 つのアニメーション化された DIV が必要です

Question

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

上下に 2 つの div があります。最初のアニメーションが実行されると、他のアニメーションの下にスライドします。両方の DIV をアニメーション化することなく、最初のアニメーションが 2 番目のアニメーションを押し下げるようにするにはどうすればよいですか。

Answer 1

top の代わりに margin を使用できます。両方の div が相対的に配置されているため、上位の値 (つまり 30%) を設定すると、2 番目の 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. box1のアニメーションに合わせてdivをスライドさせたい場合。

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