jQuery slideDown slideUp click

Question

I'm a jQuery-CSS-newbie but I'd like to move a div down to another. I just can't figure it out how to do it.

What I am trying to achieve is to slideDown a div but i don't know how to position it or use the right properties.

This is what I have tried:

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

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

The slideUp works great, but I want the green bar to move down to the red.

How can I achieve that behaviour?

Thanks in advance

Answer 1

I'm thinking you want something like this 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

Do you need something like this: Sample

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

Here is a modified version: Sample2

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