javascript - Jquery .animate() 有问题

Question

我正在尝试制作幻灯片菜单，但我的 Jquery 动画无法正常工作。我试图在点击时将页面移出。为了确保 Jquery 正在运行，我添加了几个在单击时可以正常工作的 div。这是我的代码。

$(document).ready(function(){
  $(".scroll-menu").click(function(){
    $(".scroll-menu").hide();
  });
  $(".box").click(function(){
    $(".box").hide();
  });
  $(".icon-open").click(function(){
    $("nav").animate({left: "-16em"}, 500, swing);
  });
});

.box {
  margin-top: 20em;
  position: relative;
  width: 10em;
  height: 20em;
  background: green;
  left: 20em
}
.scroll-menu{
  background: blue;
  height: 300px;
  width: 500px;
  margin: auto;
}

nav {
  position: absolute;
  height: 100%;
  width: 16em;
  left: 0;
  top:  0;
  background: #f5f5f5;
  border-right: .1em solid grey
}

.mini-menu {
  position: relative;
  background: #E3E0E6;
  top: 5em;
  height: 32em
}

.top-menu {
  position: relative;
  top: 5em;
  list-style-type: none;
  margin-left: -1em;
}

.top-menu li {
  position: relative;
  padding-top: .2em;
  padding-bottom: .2em;
  font-size: 1.1em;
  font-family: droid-sans;
  font-weight: ;
  border-radius: .5em;
  margin-right: .5em;
  margin-top: .5em;
  margin-left: -.5em;
  padding-left: 1em;
}

.top-menu li:hover {
  background: #725490;

}

.top-menu li a {
  text-decoration: none;
  color: #000000
}

.top-menu li:hover a {
  color: white;
}

.mini-menu ul li {
  position: relative;
  padding-top: .2em;
  padding-bottom: .2em;
  font-size: 1em;
  font-family: droid-sans;
  font-weight: ;
  border-radius: .5em;
  margin-right: .5em;
  margin-top: .5em;
  margin-left: -.5em;
  padding-left: 1em;
}

.mini-menu ul {
  position: relative;
  top: .9em;
  list-style-type: none;
  margin-left: -1em;
}

.mini-menu ul li a {
  text-decoration: none;
  color: rgb(109, 52, 150);
}

.mini-menu a:hover {
  color:#ab6bb1
}

.header {
  position: absolute;
  height: 5em;
  width: 100%;
  left: 0;
  top: 0;
  background: white;
  z-index: 1;
  border-bottom: .12em solid grey
}

.logo{
  position: relative;
  width: 10em;
  height: auto;
  left: 2em;
  top: 2em
}

.app{
  positio: relative;
  margin-left: 8.8em;
  margin-top: -.1em;
  font-family: antic, ;
  font-size: 1.4em
}

.search{
  position: relative;
  left: 12em;
  top: -2em;
  width:15em;
  border: .06em solid grey;
  font-family: antic, ;
  font-size: 1.9em;
  padding-left: .5em
}


form i {
  position: relative;
  left: 11.5em;
  top: -1.9em;
  color: purple;
  cursor: pointer;
}

.icon-open{
  position: absolute;
  top: 5em;
  cursor:pointer;
  left: 19em;
  z-index: 2
}

.icon-open i {
  cursor:pointer;
  z-index: 1
}

{
  position: relative;
  background: green;
  height 30em;
  width: 6em;
  top: 30em;
  left: 50em;
  border: solid;
  z-index: 20;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://use.edgefonts.net/droid-sans:n4,n7:all.js"></script>
<script src="http://use.edgefonts.net/source-sans-pro.js"></script>
<script src="http://use.edgefonts.net/antic:n4:all;droid-sans:n4,n7:all.js">   </script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
  <ul class= "top-menu">
    <li><a href="#"> Home</a></li>
    <li><a href="#"> Popular</a></li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Collections</a></li>
  </ul>
  <div class="mini-menu">
    <ul>
      <li><a href="#">Diagnosis & Staging</a></li>
      <li><a href="#">Image Review</a></li>
      <li><a href="#">Rx & Protocols</a></li>
      <li><a href="#">Planning</a></li>
      <li><a href="#">Chart Checks & Reviews</a></li>
      <li><a href="#">Calibration</a></li>
      <li><a href="#">Policy & Procedure</a></li>
      <li><a href="#">Certifications</a></li>
      <li><a href="#">Connected Clinical</a></li>
      <li><a href="#">Messaging</a></li>
      <li><a href="#">Utilities</a></li>
      <li><a href="#">Interfaces</a></li>
      <li><a href="#">Acounting & Finance</a></li>
      <li><a href="#">Clinical Analytics</a></li>
    </ul>
  </div>
</nav>
<div class="header">
  <img src="MedLever-Logo-HighRes.png" class="logo">
  <p class="app">App Store</p>
  <form>
    <input type="text" autocomplete="on" name="search" class="search">
    <i class="fa fa-search fa-2x"></i>
  </form>
</div>
<div class="icon-open">
  <i class="fa fa-bars"></i>
</div>

Answer 1

您需要在动画样式中为“swing”加上引号。

$(".icon-open").click(function(){
    $("nav").animate({left: "-16em"}, 500, 'swing');
});

http://codepen.io/anon/pen/BNGWrE

编辑 添加了一个名为 navhidden 的变量，因此您可以切换导航的显示和隐藏:

刷新/打开上面的 CodePen 链接。

$(".icon-open").click(function() {
    if (navhidden) {
      //Show
      $("nav").animate({
        left: "0"
      }, 500, 'swing');
      navhidden = false;

    } else {
      $("nav").animate({
        left: "-16em"
      }, 500, 'swing');
      navhidden = true;

    }

  });