How can I make this div slide down from top with jQuery?

Question

So I have 2 divs children of a display block parent. I would like to make div #2 (green) be on top of div #1 (red). With "on top" I'm not talking about z-index, I'm talking about literally being on top of the other. And then I was wondering if there could be a way to make div #2 slideDown()

As far as I tested, jQuery slideDown() or slideUp() works differently. In the demo I made, when I run

$('.item-1').slideUp();

The item 2 is sliding up instead of item 1, why is that? I'm getting confused.

Any hints would be appreciated,

Thanks in advance.

 window.slide = function() { $('.item-1').slideUp(); } 

 .items-container { height: 400px; width: 240px; background-color: #c3c3c3; display: block; /* overflow: hidden; */ } .item { height: 100%; width: 240px; position: relative; font-size: 30px; text-align: center; vertical-alignment: middle; } .item-1 { background-color: red; } .item-2 { float: left; position: relative; background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="slide()"> Click me! </button> <div class="items-container"> <div class="item item-1"> 1 </div> <div class="item item-2"> 2 </div> </div> 

Answer 1

.slideUp() works by changing the height of the element. As that element gets shorter, following elements will move up the page.

As seen in the documentation:

The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items.

Answer 2

In your fiddle, item1 slides up as expected and as defined by the doc :

Description: Hide the matched elements with a sliding motion.

So your div slides up and disappears, and item2 doesn't "move", just fills the space in the DOM after item1 has been hidden.

Answer 3

jQuery's slideUp() and slideDown() methods animate the height of the matched elements, not position as you seemed to want: http://api.jquery.com/slideUp/ .

What you seem to want is to translate the div it so that it moves on top of the first one.

http://www.w3schools.com/css/css3_2dtransforms.asp

 window.slideUp = function() { $('.item-2').addClass('slideUp'); } window.slideDown = function() { $('.item-2').removeClass('slideUp'); } 

 .items-container { height: 100px; width: 240px; background-color: #c3c3c3; display: block; /* overflow: hidden; */ } .item { height: 100%; width: 240px; position: relative; font-size: 30px; text-align: center; vertical-alignment: middle; } .item-1 { background-color: red; } .item-2 { position: relative; transition: transform linear 1s; background-color: green; } .slideUp { transform: translate(0,-100%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="slideUp()"> SlideUp! </button> <button onclick="slideDown()"> SlideDown! </button> <div class="items-container"> <div class="item item-1"> 1 </div> <div class="item item-2"> 2 </div> </div>