jQuery slideDown slideUp點擊

Question

我是jQuery-CSS-newbie，但我想將div移動到另一個。我無法弄清楚如何去做。

我想實現的是滑動一個div，但我不知道如何定位它或使用正確的屬性。

這是我曾嘗試：

$("#two").click(function() { 
    $('#one').slideUp(500); 
}); 

http://jsfiddle.net/HUbHN/2/

的效果基本show的偉大工程，但我想綠色條向下移動到紅色。

我該如何實現該行爲？

在此先感謝

Answer 1

我想你想要的東西一樣這 http://jsfiddle.net/HUbHN/6/

#main{ 
width: 400px; 
height: 400px; 
background-color: black; 
position:relative; 
} 

#one { 
width: 150px; 
height: 100px; 
background-color: green; 
position:relative; 
} 

#two { 
width: 150px; 
height: 150px; 
background-color: red; 
position:absolute; 
top:100px; 
} 

//js 

$("#two").click(function() { 
$('#one').animate({'height': '10px', 'top': '99px'}, 1000); 
}) 

Answer 2

你需要的是這樣的：Sample

$("#two").click(function() { 
    $('#one').slideUp(500, function(){ 
     $(this).insertAfter("#two").slideDown(500); 
    }); 
}); 

下面是修改後的版本：Sample2

$("#main").on('click', ' div:last', function() { 
    $(this).prev().slideUp(500, function(){ 
     $(this).insertAfter($(this).next()).slideDown(500); 
    }); 
});