jQuery slideDown slideUp click

Question

Я новичок в jQuery-CSS, но я хотел бы переместить div вниз к другому. Я просто не могу понять, как это сделать.

То, чего я пытаюсь добиться, это сдвинуть DIV, но я не знаю, как его расположить или использовать правильные свойства.

Вот что я попробовал:

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

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

SlideUp прекрасно работает, но я хочу, чтобы зеленая полоса переместилась вниз на красную.

Как я могу добиться такого поведения?

заранее спасибо

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

Вам нужно что-то вроде этого: Образец

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