頁面加載時從另一個 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()方法內部的回調 function，一旦初始 animation 完成，就會執行該回調：

 // 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 毫秒，讓每個 animation 花費 1500 毫秒，這樣總時間相同，但允許 animation 分階段運行。

參考：

• animate() 。

Answer 2

$( ".box-2" ).hide(0); 方法用於隱藏 animation 之后的第二個容器。 z-index: -1; 應用樣式以使box-2容器在 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>

---

參考

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

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>

Answer 4

使用z-index:1; 在.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>