CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Arun Shah
Arun Shah

Reputation: 39

.animate not repeating on .toggle click event

I have a menu section which is hidden initially, but as soon as hamburger/button clicks, it will animate from its original position of 70px to 90px using .animate function of jquery, yes its working for toggle on first go, but when i hide the menu by clicking button, then again try to show it again clicking the button, then .animate function dont kick off.

Here is the DEMO

Code

<!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;
}

Javascript

$(function () {
        var $hamburger = $(".hamburger");
        $hamburger.on("click", function(e) {
            e.preventDefault();
            $hamburger.toggleClass("is-active");
            $(".nav").toggle().animate({
                left: "90px"
            }, 300 ).addClass("animated fadeIn");
        });
    });

Upvotes: 0

Views: 70

Answers (1)

Ionut Necula
Ionut Necula

Reputation: 11480

You can check if it was animated using a boolean variable and then reposition the nav according to that. Please read the working snippet below:

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

Upvotes: 1

Related Questions