jquery 動畫（向右滑動）
[英]jquery animate (slideing right)
問題描述
我試圖通過使用 jquery 緩慢向右滑動來使按鈕展開以顯示內容，但我無法讓它工作。 另外，我沒有控制台錯誤
$( document ).ready(function() { $('.btn').on('click', () => { $('.contact').animate({'display': 'block'}, 500); }); });
.btn{ color: black; background: white; border: 1px solid black; } .contact{ display:none; }
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <a href='#' class='btn'> click here <span class="contact"> slide out </span></a> </body> <
1 個解決方案
解決方案1
1 已采納 2019-12-05 21:05:22
是的，您可以通過寬度切換來實現這一點。
$(".contact").animate({width:'toggle'},350);
為了防止文本在兩行上中斷，您可以使用快速 CSS 來停止將文本中斷到下一行。
white-space:nowrap;
現在我們將隱藏文本直到它完全展開。 只需添加一個visibility:hidden到跨度。
現在，通過 jquery，我們將使用setTimeout函數在延遲后看到文本。
setTimeout(function(){
$(".contact").css("visibility","visible");
}, 350);
$( document ).ready(function() { $('.btn').on('click', () => { $(".contact").animate({width:'toggle'},350); setTimeout(function(){ $(".contact").css("visibility","visible"); }, 350); }); });
.btn{ color: black; background: white; border: 1px solid black; } .contact{ display:none; visibility:hidden; }
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <a href='#' class='btn'> click here <span class="contact"> slide out </span></a> </body> <
JQuery Slideing效果不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.