Slide up div from another divs top when page loads-CodePudding

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 i.e. 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 >div 1</div>

<div >div 2 - the one that will slide up from box-1's Top.</div>

CodePudding user response：

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 >div 1</div>

<div >div 2 - the one that will slide up from box-1's Top.</div>

CodePudding user response：

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 >Div that will slide up from box-1's Top.</div>

<div >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().

CodePudding user response：

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 >Div that will slide up from box-1's Top.</div>

<div >Static div</div>