javascript - 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 { 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 { 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 buy</a></li> <li><a href="#">support</a></li> <li><a href="#">edit book</a></li> </ul> </div>i find information internet , add "slow effect" mobile-sub-menu when toggle.
now, add "slow effect" when click on main items of slideout-menu (which "manuals") when slide out left.
how can that?
add duration animate. add smooth animation effect.
slideoutmenu.animate({ left: "0px" }, 1000); // 1 second slideoutmenu.animate({ left: -slideoutmenuwidth }, 1000); // 1 second code
$(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 } }); });
Comments
Post a Comment