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