How to add “slow effect” to my slide menu when slide out from left?

Question

 $(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> 

I find some information from internet and add "slow effect" to my mobile-sub-menu when toggle.

Now, I would like to also add this "slow effect" when I click on main items of slideout-menu (which is "MANUALS") when slide out from left.

How can I do that?

Answer 1

Add the duration to the animate . This will 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
        }
    });
});