Question

我有一个最初隐藏的菜单部分，但是一旦汉堡包/按钮点击，它将使用jquery的.animate功能从其原始位置70px动画到90px，是的，它首先用于切换，但是当我通过单击按钮隐藏菜单，然后再次尝试再次显示它单击按钮，然后.animate功能不开始。

以下是DEMO

代码

private void Img_Loaded(object sender, RoutedEventArgs e)
{
    Image img = sender as Image;
    string name = img.Tag.ToString();

    //set source of Image based on the value of name here...
    //see for an example http://stackoverflow.com/questions/350027/setting-wpf-image-source-in-code
}

的Javascript

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

  <button class="menu-ham hamburger hamburger--squeeze" type="button" style="color:#fff">
  <span class="hamburger-box">
    <span class="hamburger-inner">click</span>
  </span>
</button>

<nav class="nav" role="navigation">
                        <ul><li id="menu-item-147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-147"><a href="#app_feature">Features</a></li>
<li id="menu-item-148" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-148"><a href="#app_why">Why</a></li>
<li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-149"><a href="#app_faq">FAQ</a></li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-150"><a href="#app_team">Team</a></li>
<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-136"><a href="#app_footer">Contact</a></li>
</ul>                   </nav>
</body>
</html>


.nav {
  width: 80%;
  float: left;
  position: absolute;
  top: 62px;
  left: 70px;
  display: none;
  transition: all 0.3s; }
  @media screen and (max-width: 992px) {
    .nav {
      top: 40px;
      left: 70px; } }
  .nav ul {
    list-style: none; }
    .nav ul li {
      list-style: none;
      display: inline-block;
      padding: 0 18px; }
      .nav ul li a {
        font-size: 18px;
        color: #000;
        font-weight: 400; }
        .nav ul li a:hover {
          text-decoration: none; }
        .nav ul li a:active {
          text-decoration: none; }
        .nav ul li a:visited {
          text-decoration: none; }
        .nav ul li a:focus {
          text-decoration: none; }



.hamburger:hover {
   color: #000;
}

Answer 1

您可以使用boolean变量检查它是否已设置动画，然后根据该变量重新定位导航。请阅读以下工作片段：

＆＃13;

$(function() {
  var isAnimated = false;
  var $hamburger = $(".hamburger");
  $hamburger.on("click", function(e) {
    e.preventDefault();
    $hamburger.toggleClass("is-active");
    if (!isAnimated) {
      $(".nav").show().animate({
        left: "90px"
      }, 300).addClass("animated fadeIn");
      isAnimated = true;
    } else {
      $(".nav").hide().animate({
        left: "70px"
      }, 300).removeClass("animated fadeIn");
      isAnimated = false;
    }
  });
});

＆＃13;

.nav {
  width: 80%;
  float: left;
  position: absolute;
  top: 62px;
  left: 70px;
  display: none;
  transition: all 0.3s;
}

@media screen and (max-width: 992px) {
  .nav {
    top: 40px;
    left: 70px;
  }
}

.nav ul {
  list-style: none;
}

.nav ul li {
  list-style: none;
  display: inline-block;
  padding: 0 18px;
}

.nav ul li a {
  font-size: 18px;
  color: #000;
  font-weight: 400;
}

.nav ul li a:hover {
  text-decoration: none;
}

.nav ul li a:active {
  text-decoration: none;
}

.nav ul li a:visited {
  text-decoration: none;
}

.nav ul li a:focus {
  text-decoration: none;
}

.hamburger:hover {
  color: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="menu-ham hamburger hamburger--squeeze" type="button" style="color:#fff">
  <span class="hamburger-box">
    <span class="hamburger-inner">click</span>
  </span>
</button>

<nav class="nav" role="navigation">
  <ul>
    <li id="menu-item-147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-147"><a href="#app_feature">Features</a></li>
    <li id="menu-item-148" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-148"><a href="#app_why">Why</a></li>
    <li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-149"><a href="#app_faq">FAQ</a></li>
    <li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-150"><a href="#app_team">Team</a></li>
    <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-136"><a href="#app_footer">Contact</a></li>
  </ul>
</nav>

＆＃13;

.anog不会重复.toggle点击事件

1 个答案: