堆棧兩個div和滑動一個接一個被刪除瓦特/ jQuery

Question

我有一個div（div1）是在右下角的位置。當div1被點擊時，它會被jQuery刪除。

我想將另一個div（div2）放在div1上方，第一個div被移除後，我想讓第二個div向下滑動，其中第一個div是原來的位置。

這是我的DEMO。

Answer 1

嗯......我不完全清楚你的問題，但這是你想要的嗎？

http://jsfiddle.net/X7XVa/

Answer 2

你可以這樣做：

$(function() { 
    $(".div2").css({ 
     // places .div2 right above .div1 
     bottom: $(".div1").outerHeight() + "px" 
    }); 
    $(".div1").click(function() { 
     $(".div1").fadeOut("slow", function() { 
      $(this).remove(); 
      $(".div2").animate({ 
       bottom: "0px" // slides .div2 down 
      }); 
     }); 
    }); 
} 

jsFiddle example here

Answer 3

如果＃DIV2尚不存在：

$('#div1').slideUp(300, function(){ 
    $(this).before('<div id="div2">Content</div>'); 
    $(this).remove(); 

    $('#div2').slideDown(300); 
}); 

或者，如果你已經有了＃DIV2在頁面上：

$('#div1').slideUp(300, function(){ 
    $(this).before('#div2'); 
    $(this).remove(); 

    $('#div2').slideDown(300); 
});