jquery - jQuery slideDown slideUp 点击

Question

我是 jQuery-CSS 新手，但我想将一个 div 移到另一个。我只是不知道该怎么做。

我想要实现的是向下滑动一个 div，但我不知道如何定位它或使用正确的属性。

这是我尝试过的：

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

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

slideUp 效果很好，但我希望绿色条向下移动到红色。

我怎样才能实现这种行为？

提前致谢

Answer 1

你需要这样的东西吗： 样品

$("#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);
  });
});

Answer 2

我在想你想要这样的东西 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);
})