页面加载时从另一个 div 顶部向上滑动 div

Question

所以我有 2 个 div，如下面的代码所示。

我只想从第一个 div 的顶部向上滑动第二个 div (box-2)。 真正的问题是

• 第一个 div 将保持原样，第二个 div 将从其背面滑动。
• 我想隐藏第二个 div，让它滑动并在它滑动时自我陶醉，即只有向上滑动的部分应该是可见的。

不知道怎么做，尝试了多种选择，但没有运气。 如果有人可以指导，真的很感激。

$('.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

考虑到您的起点，最简单的方法是简单地使用 animate() 方法内部公开的回调函数，该函数将在初始动画完成后执行：

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

请注意，由于两个动画顺序运行，我将您的初始时间 3000 毫秒划分为每个动画需要 1500 毫秒，这样总时间相同，但允许动画分阶段运行。

参考资料：

• animate()。

Answer 2

在.box-1的css上使用z-index: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>

Answer 3

我不太确定我是否完全理解您的问题。

但是如果你想从box-1后面显示box-2，你不只需要在html中切换它们的位置吗？所以 box-1 总是在 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>