![](/img/trans.png)
[英]How do I add a smooth slide from left to right effect with CSS and Javascript on my side nav?
[英]How to add “slow effect” to my slide menu when slide out from left?
$(document).ready(function() { $('.slideout-menu-toggle').on('click', function(event) { event.preventDefault(); // create menu variables var slideoutMenu = $('.slideout-menu'); var slideoutMenuWidth = $('.slideout-menu').width(); // toggle open class slideoutMenu.toggleClass("open"); // slide menu if (slideoutMenu.hasClass("open")) { slideoutMenu.animate({ left: "0px" }); } else { slideoutMenu.animate({ left: -slideoutMenuWidth }, 250); } }); }); $(document).ready(function() { $('.slideout-menu li').click(function() { $(this).children('.mobile-sub-menu').toggle("slow"); }); });
.slideout-menu { position: absolute; top: 100px; left: 0px; width: 100%; height: 100%; background: rgb(248, 248, 248); z-index: 1; } .slideout-menu .slideout-menu-toggle { position: absolute; top: 12px; right: 10px; display: inline-block; padding: 6px 9px 5px; font-family: Arial, sans-serif; font-weight: bold; line-height: 1; background: #222; color: #999; text-decoration: none; vertical-align: top; } .slideout-menu .slideout-menu-toggle:hover { color: #fff; } .slideout-menu ul { list-style: none; font-weight: 300; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } .slideout-menu ul li { /*border-top: 1px solid #dddddd;*/ border-bottom: 1px solid #dddddd; } .slideout-menu ul li a { position: relative; display: block; padding: 10px; color: #999; text-decoration: none; } .slideout-menu ul li a:hover { background: #aaaaaa; color: #fff; } .slideout-menu ul li ai { position: absolute; top: 15px; right: 10px; opacity: .5; } .slideout-menu .mobile-sub-menu { display:none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button type="button" class="slideout-menu-toggle" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="slideout-menu"> <ul> <li><a href="#">MANUALS<i class="fa fa-arrow-right"></i></a> <ul class="mobile-sub-menu"> <li><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">1</a></li> </ul> </li> <li><a href="#">NEWS</a></li> <li><a href="#">SPARE PART</a></li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">WHERE TO BUY</a></li> <li><a href="#">SUPPORT</a></li> <li><a href="#">EDIT BOOK</a></li> </ul> </div>
我從互聯網上找到了一些信息,並在切換時在我的移動子菜單中添加了“慢速效果”。
現在,當我從左側滑出時單擊滑出菜單的主要項目(即“ MANUALS”)時,我還想添加此“緩慢效果”。
我怎樣才能做到這一點?
將duration
添加到animate
。 這將添加平滑的動畫效果。
slideoutMenu.animate({
left: "0px"
}, 1000); // 1 second
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 1000); // 1 second
碼
$(document).ready(function() {
$('.slideout-menu-toggle').on('click', function(event) {
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: "0px"
}, 1000); // 1 second
} else {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 1000); // 1 second
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.