Slide up div from another divs top when page loads

Question

So I have 2 div as shown in below code.

What I just want is to slide up the second div (box-2) from the top of the first div. The real problem is

• First div will remain as it is and second div will slide from it's back side.
• I want to keep the second div hidden and let it slide and revel it self as it slides ie only the portion that slides up should be visible.

Not sure how to do it, tried multiple options but no luck. Really appreciate if anyone can guide.

 $('.box-2').animate({'margin-bottom': '83px'}, 3000);

 .box-1 { height: 30px; width: 100px; background-color: blue; color: white; position: fixed; bottom: 0px; }.box-2 { height: 30px; width: 500px; background-color: blue; color: white; position: fixed; bottom: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="box-1">div 1</div> <div class="box-2">div 2 - the one that will slide up from box-1's Top.</div>

Answer 1

The easiest way, considering your starting point, is to simply use the callback function exposed inside of the animate() method, which will be executed once the initial animation is completed:

 // your initial jQuery, which selects the '.box-2' element(s) and // passes that collection to the animate() method: $('.box-2').animate({ // here rather than quote (just to show the example), we camel case // the CSS 'margin-bottom' property to the (unquoted) 'marginBottom', // and pass in the new dimension to which the method will animate: marginBottom: '83px' // we then take advantage of the completion callback, which is called // when the first animation is complete: }, 1500, function() { // here we take the 'this' from the collection passed to the outer // animate() call in which this callback function is wrapped: $(this).animate({ // here we then animate the 'width' to its new dimension of // '500px': width: '500px' }, 1500); });

 .box-1 { height: 30px; width: 100px; background-color: blue; color: white; position: fixed; bottom: 0px; }.box-2 { height: 30px; width: 100px; background-color: blue; color: white; position: fixed; bottom: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="box-2">Div that will slide up from box-1's Top.</div> <div class="box-1">Static div</div>

Note that, because of the two animations running sequentially I divided your initial time of 3000ms to have each animation take 1500ms, so that the overall time taken is the same but allowing the animation to run in stages.

References:

• animate() .

Answer 2

The $( ".box-2" ).hide(0); method is used to hide the second container after the animation. z-index: -1; style applied to make the box-2 container appear at the bottom during animation.

 $(document).ready(function() { /* The animation moves the second container from the bottom to a height of 83px. */ $('.box-2').animate({'margin-bottom': '83px'}, 3000, function(){ /* The first container appears when the animation is finished. */ $( ".box-1" ).css("display", "inline"); /* The second container is stored after the animation. */ $( ".box-2" ).hide(0); }); });

 .box-1 { height: 30px; width: 100px; background-color: red; color: white; position: fixed; bottom: 0px; /* The first container is initially hidden. */ display: none; }.box-2 { height: 30px; width: 500px; background-color: blue; color: white; position: absolute; bottom: 0px; /* Implemented to make the container appear at the bottom during animation. */ z-index: -1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="box-1">Static div</div> <div class="box-2">Div that will slide up from box-1's Top.</div>

---

References

• https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 3

I'm not quite sure I understand your question completely.

But if you want to reveal the box-2 from behind box-1, don't you just have to switch their positions in the html? So that box-1 is always in front of box-2

 $('.box-2').animate({'margin-bottom': '83px'}, 3000);

 .box-1 { height: 30px; width: 100px; background-color: blue; color: white; position: fixed; bottom: 0px; }.box-2 { height: 30px; width: 500px; background-color: blue; color: white; position: fixed; bottom: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="box-2">Div that will slide up from box-1's Top.</div> <div class="box-1">Static div</div>

Answer 4

Use z-index:1; on css of .box-1

 $('.box-2').animate({'margin-bottom': '83px'}, 3000);

 .box-1 { height: 30px; width: 100px; background-color: blue; color: white; position: fixed; bottom: 0px; z-index:1; }.box-2 { height: 30px; width: 500px; background-color: blue; color: white; position: fixed; bottom: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="box-1">div 1</div> <div class="box-2">div 2 - the one that will slide up from box-1's Top.</div>