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

你需要把报价放在＆＃39; swing＆＃39;在动画风格。

$(".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; } });

Answer 2

在this JSFiddle中，您可以在点击图片时找到它。

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

遇到Jquery .animate（）的问题

2 个答案: