如何同時滑動兩個元素？

Question

這是實際效果的代碼：

 function nextStepTransition() { $("#step1").velocity("transition.slideLeftBigOut", 2000); $("#step2").velocity("transition.slideRightBigIn", 2000); } 

 #step2 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.js"></script> <div id="step1"> <p>I'm step number one!</p> <button onClick="nextStepTransition()">click me to go to the next step</button> </div> <div id="step2"> <p>I'm step number two</p> </div> 

我們希望step2進入時不要停留在step1以下，而應並排。

任何推動力嗎？

對Velocity.js來說還很陌生，而在JS中卻不是那么好。

謝謝。

Answer 1

這是做到這一點的一種方法，盡管在某些情況下它們在位置上會重疊（如您從示例中看到的）。

 function nextStepTransition() { $("#step1").velocity("transition.slideLeftBigOut", 2000); $("#step2").velocity("transition.slideRightBigIn", 2000); } 

 #step1, #step2 { position:absolute; } #step2 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.js"></script> <div id="step1"> <p>I'm step number one!</p> <button onClick="nextStepTransition()">click me to go to the next step</button> </div> <div id="step2"> <p>I'm step number two</p> </div> 

但是，如果這樣做，則需要確保父元素的位置設置正確，或者兩個元素都可能拋出到頁面頂部（或下一個具有position：absolute或position：relative的元素）。 您也可以將它們都向左浮動，盡管由於動畫制作時速度沒有改變＃step1元素的寬度，所以當第一個元素最終不顯示任何動畫時，它們在動畫末尾的效果就像快照一樣在第一個元素上。

我對速度不熟悉，但是有很多其他方法可以僅使用jQuery，甚至更好，僅使用CSS（單擊處理程序除外）即可做到這一點。

jQuery示例：

 $(document).ready(function(){ $("#theButton").on('click', function(){ $("#step1").animate({ marginLeft: "-200px", opacity: 0 }, 2000, function(){ $(this).hide() }); $("#step2").show().animate({ opacity: 1, }, 2000); }); }); 

 .container { overflow:hidden; } #step1, #step2 { float:left; width:200px; } #step2 { opacity:0; display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div id="step1"> <p>I'm step number one!</p> <button id="theButton">click me to go to the next step</button> </div> <div id="step2"> <p>I'm step number two</p> </div> </div> 

CSS示例：

 $(document).ready(function(){ $("#theButton").on('click', function(){ $("#step1").addClass("fadeAway"); $("#step2").addClass("fadeIn"); }); }); 

 .container { overflow:hidden; } #step1, #step2 { float:left; width:200px; } #step2 { opacity:0; display:none; } #step1.fadeAway { animation: moveAndFadeOut 2s forwards; } #step2.fadeIn { /*need to add "#step2" here to override styles above*/ display:block; animation: fadeIn 2s forwards; } @keyframes moveAndFadeOut { 0% {margin-left:0px; opacity:1;} 100% {margin-left:-200px; opacity:0; display:none;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div id="step1"> <p>I'm step number one!</p> <button id="theButton">click me to go to the next step</button> </div> <div id="step2"> <p>I'm step number two</p> </div> </div>