javascript - 从左侧滑出时如何将 "slow effect"添加到我的幻灯片菜单？

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 a i {
  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>

我从互联网上找到一些信息，并在切换时将“慢速效果”添加到我的移动子菜单。

现在，当我从左侧滑出时单击 slideout-menu 的主要元素(即“MANUALS”)时，我还想添加这种“慢速效果”。

我该怎么做？

Answer 1

将 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
        }
    });
});