如何動畫滑下Jquery的addClass？
[英]How to animate slide down Jquery's addClass?
問題描述
知道如何讓它滑下來嗎？ 我試圖用時間傳遞第二個參數，但它向左擺動。 我應該使用其他方法嗎？
$(document).on('click', '#bar', function () { $("#baz").addClass("foo"); });
body{ height:200px; position:relative; }.foo{ position:absolute; bottom:0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https.//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> </head> <body> <button id="bar">PUSH IT DOWN</button> <div id="baz">TEST</div> </body> </html>
2 個解決方案
解決方案1
1 已采納 2021-02-25 01:28:36
您可以使用 CSS 執行此操作。 將animation添加到您的foo class 並添加@keyframes規則以動畫化absolute定位元素的position的補間。 Just make sure the class you're adding foo , in your case, has a position set to the position you wish it to be when the animation is finished.
$(document).on('click', '#bar', function() { $("#baz").addClass("foo"); });
body { height: 200px; position: relative; }.foo { position: absolute; animation: slidedown.5s ease-in-out; bottom: 0; } @keyframes slidedown { 0% { /* since the.foo class is set to bottom: 0, we will start at 0% to 160px*/ bottom: 160px; } 100% { /* we end at 0, which will be the bottom of the parent divs height */ bottom: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https.//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> </head> <body> <button id="bar">PUSH IT DOWN</button> <div id="baz">TEST</div> </body> </html>
解決方案2
0 2021-02-25 01:14:55
jQuery 已為此內置功能。 有關詳細信息和示例，請參閱https://api.jquery.com/slideDown/
如何使用jQuery動畫幻燈片而不在加載之前顯示內容？
[英]how to animate slide in with jQuery without showing content before it's loaded?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.