Myv382 Myv382 - 5 days ago 6
jQuery Question

Jquery beginner - I have some trouble with menu 'animation'

So the problem is strange for me, and I could'nt figure out how to google it even tho i tried for like 1-2 hours...

The animation on 'mouseenter' and 'mouseleave' works fine.
The problem is that after i 'click' this menu button twice to change it to "X" and revert to 3 dashes the animation of 'mouseenter' and 'mouseleave' does not work..

Also sorry for my broken english.. x.x

Here's a code:



$(document).ready(function() {

/* Slide up/down menu bars */

$('.toggle-nav').on("mouseenter", function moveUp() {
/* Stuff to do when the mouse enters the element */
$('.line1').css({
top: '-7px',
opacity: '0'
});
setTimeout(function() {
$('.line2').css({
top: '0px'
});
}, 70);
setTimeout(function() {
$('.line3').css({
top: '7px'
});
}, 140);
setTimeout(function() {
$('.line4').css({
top: '14px',
opacity: '1'
});
}, 210);
});

$('.toggle-nav').on("mouseleave", function moveDown() {
/* Stuff to do when the mouse leaves the element */
$('.line4').css({
top: '21px',
opacity: '0'
});
setTimeout(function() {
$('.line3').css({
top: '14px'
});
}, 70);
setTimeout(function() {
$('.line2').css({
top: '7px'
});
}, 140);
setTimeout(function() {
$('.line1').css({
top: '0px',
opacity: '1'
});
}, 210);
});

/* Make it show/hide nav-menu */
$('.icon-container').on('click', function() {
/* Act on the event */
$('.nav-menu').toggle();
});

/* Make it X */
$('.toggle-nav').on('click', function() {
$('.toggle-nav').toggleClass('test');

if ($('.toggle-nav').hasClass('test')) {
$('.toggle-nav').off('mouseenter');
$('.toggle-nav').off('mouseleave');
$('.line').css({
top: "+7px"
});
$('.line2').css({
transform: "rotate(-45deg)"
});
$('.line1').css({
transform: "rotate(-45deg)",
top: "7px",
opacity: '0'
});
$('.line3').css({
transform: "rotate(45deg)"
});
$('.line4').css({
transform: "rotate(45deg)",
top: "7px",
opacity: '0'
});
} else {
$('.line').css({
top: "0px"
});
$('.line1').css({
transform: "rotate(0deg)",
top: "0px",
opacity: '1'
});
$('.line2').css({
transform: "rotate(0deg)",
top: "7px"
});
$('.line3').css({
transform: "rotate(0deg)",
top: "14px"
});
$('.line4').css({
transform: "rotate(0deg)",
top: "21px",
opacity: '0'
});
};
});
});

body {
/*body reset*/
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}

header {
position: absolute;
top: 0px;
height: 500px;
width: 100%;
background-image: url(img/bg.jpg);
background-size: cover;
}

.toggle-nav {
width: 93px;
height: 68px;
background: #990e35;
margin: 0px;
z-index: 1;
position: absolute;
}

.icon-container {
display: block;
height: 20px;
position: absolute;
top: 10px;
backface-visibility: hidden;
}

.line {
position: absolute;
background-color: white;
width: 37px;
height: 3px;
left: 28px;
transition: all 250ms ease-in-out;
}

.nav-menu {
background: #990e35;
z-index: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 20%;
opacity: 0;
}

.nav-menu ul {
width: 300px;
display: inline-block;
list-style: none;
position: relative;
top: calc(50% - 100px)
}

.nav-menu ul li {
padding: 5px 0px;
margin: 5px 0px;
}


/**** line base ****/

.line1 {
top: 0px;
}

.line2 {
top: 7px;
}

.line3 {
top: 14px;
}

.line4 {
top: 21px;
opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header>

<div class="toggle-nav">
<div class="icon-container">
<p class="line line1"></p>
<p class="line line2"></p>
<p class="line line3"></p>
<p class="line line4"></p>
</div>
</div>
</header>


<nav class="nav-menu">
<ul>
<li>
<a href="#"></a>Home</li>
<li>
<a href="#"></a>Artwork Gallery</li>
<li>
<a href="#"></a>Clients</li>
<li>
<a href="#"></a>About Me</li>
<li>
<a href="#"></a>Contact</li>
</ul>
</nav>




Answer

You are removing the mouseenter-leave behaviors on click with this lines:

$('.toggle-nav').off('mouseenter');
$('.toggle-nav').off('mouseleave');

So it's better if you define the functions outside from the binding at the begining, that way later you can bind again those functions for the enter/leave :

$(document).ready(function() {
  function moveUp() {
    $('.line1').css({
      top: '-7px',
      opacity: '0'
    });
    setTimeout(function() {
      $('.line2').css({
        top: '0px'
      });
    }, 70);
    setTimeout(function() {
      $('.line3').css({
        top: '7px'
      });
    }, 140);
    setTimeout(function() {
      $('.line4').css({
        top: '14px',
        opacity: '1'
      });
    }, 210);
  }
  function moveDown() {
    $('.line4').css({
      top: '21px',
      opacity: '0'
    });
    setTimeout(function() {
      $('.line3').css({
        top: '14px'
      });
    }, 70);
    setTimeout(function() {
      $('.line2').css({
        top: '7px'
      });
    }, 140);
    setTimeout(function() {
      $('.line1').css({
        top: '0px',
        opacity: '1'
      });
    }, 210);
  }
  $('.toggle-nav').on("mouseenter", moveUp)
  $('.toggle-nav').on("mouseleave", moveDown);

  /* Make it X */
  $('.toggle-nav').on('click', function() {
    $('.toggle-nav').toggleClass('test');
    if ($('.toggle-nav').hasClass('test')) {
      $('.toggle-nav').off('mouseenter');
      $('.toggle-nav').off('mouseleave');
      $('.line').css({
        top: "+7px"
      });
      $('.line2').css({
        transform: "rotate(-45deg)"
      });
      $('.line1').css({
        transform: "rotate(-45deg)",
        top: "7px",
        opacity: '0'
      });
      $('.line3').css({
        transform: "rotate(45deg)"
      });
      $('.line4').css({
        transform: "rotate(45deg)",
        top: "7px",
        opacity: '0'
      });
    } else {
      $('.toggle-nav').on("mouseenter", moveUp)
      $('.toggle-nav').on("mouseleave", moveDown);
      $('.line').css({
        top: "0px"
      });
      $('.line1').css({
        transform: "rotate(0deg)",
        top: "0px",
        opacity: '1'
      });
      $('.line2').css({
        transform: "rotate(0deg)",
        top: "7px"
      });
      $('.line3').css({
        transform: "rotate(0deg)",
        top: "14px"
      });
      $('.line4').css({
        transform: "rotate(0deg)",
        top: "21px",
        opacity: '0'
      });
    };
  });
});
.toggle-nav {
  width: 93px;
  height: 68px;
  background: #990e35;
  margin: 0px;
  z-index: 1;
  position: absolute;
}
.icon-container {
  display: block;
  height: 20px;
  position: absolute;
  top: 10px;
  backface-visibility: hidden;
}
.line {
  position: absolute;
  background-color: white;
  width: 37px;
  height: 3px;
  left: 28px;
  transition: all 250ms ease-in-out;
}
.line2 {
  top: 7px;
}
.line3 {
  top: 14px;
}
.line4 {
  top: 21px;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header>
  <div class="toggle-nav">
    <div class="icon-container">
      <p class="line line1"></p>
      <p class="line line2"></p>
      <p class="line line3"></p>
      <p class="line line4"></p>
    </div>
  </div>
</header>

Comments