Question

我是一个jQuery-CSS新手，但我想将div移到另一个。我只是无法弄明白该怎么做。

我想要实现的是slideDown div但我不知道如何定位或使用正确的属性。

这就是我的尝试：

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

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

slideUp工作得很好，但我希望绿色条向下移动到红色。

我该如何实现这种行为？

提前致谢

Answer 1

你需要这样的东西： 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);
  });
});

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

jQuery slideDown slideUp单击

2 个答案: