I've encountered a strange problem that I've been struggling to find a solution for, even after spending hours trying to Google it...
The animation on 'mouseenter' and 'mouseleave' is working perfectly fine. However, the issue arises when I click the menu button twice to change it to an "X" and then revert back to three dashes - the animation for 'mouseenter' and 'mouseleave' stops functioning...
Apologies for my imperfect English... x.x
Below is the code snippet:
$(document).ready(function() {
/* Slide up/down menu bars */
$('.toggle-nav').on("mouseenter", function moveUp() {
/* Implement animation for mouse enter */
$('.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() {
/* Implement animation for mouse leave */
$('.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);
});
/* Show/hide nav-menu on click */
$('.icon-container').on('click', function() {
$('.nav-menu').toggle();
});
/* Change to '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>