Shniper Shniper - 6 months ago 11
Javascript Question

Hover function repeating whenever you move mouse inside selector

I have an animation that fires on hover inside certain divs. When the mouse is in the div, moving it to a different location in the div causes the hover effect to trigger again. I've tried using mouseenter/mouseleave and that does the same thing.

How can I make the function only trigger on mouseenter and mouseleave and not whenever it moves inside the selector?

DEMO

$('#nav, #footer, #leftNav, #rightNav').hover(function() {
$('#navFill').animate({
left: 0
}, 300);
$('#footerFill').animate({
left: 0
}, 300);
$('#leftNavFill').animate({
top: 0
}, 300);
$('#rightNavFill').animate({
top: 0
}, 300);
}, function() {
$('#navFill').animate({
left: '-100vw'
}, 300);
$('#footerFill').animate({
left: '100vw'
}, 300);
$('#leftNavFill').animate({
top: '100vh'
}, 300);
$('#rightNavFill').animate({
top: '-100vh'
}, 300);
});

Answer

According to your code you are calling both the animation at the same hover event, or lets say you are trying to animate it at the same mouseenter and mouseleave event. Instead of it try something like this.

    $('#nav, #footer, #leftNav, #rightNav').mouseenter(function() {
console.log("mouseenter");
  $('#navFill').animate({
    left: 0
  }, 300);
  $('#footerFill').animate({
    left: 0
  }, 300);
  $('#leftNavFill').animate({
    top: 0
  }, 300);
  $('#rightNavFill').animate({
    top: 0
  }, 300);
});


$('#navFill, #footerFill, #leftNavFill, #rightNavFill').mouseleave(function() {
console.log("mouseleave");
  $('#navFill').animate({
    left: '-100vw'
  }, 300);
  $('#footerFill').animate({
    left: '100vw'
  }, 300);
  $('#leftNavFill').animate({
    top: '100vh'
  }, 300);
  $('#rightNavFill').animate({
    top: '-100vh'
  }, 300);
});
#nav {
  background-color: rgba(86, 55, 144, 0.95);
  width: 100vw;
  height: 7.5vh;
  z-index: 10;
  box-shadow: 0px 2px 3px #000;
  position: fixed;
}

#navBars {
  position: absolute;
  left: 5vw;
  transform: scaleY(.75);
  line-height: 7.5vh;
  cursor: pointer;
  color: #f0f0f0;
}

#navigation {
  margin-left: 10vw;
}

.navigation {
  display: inline;
  position: relative;
  left: -3vw;
  margin-left: 3vw;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 7.5vh;
  cursor: pointer;
  color: #f0f0f0;
}

#leftNav {
  height: 100vh;
  width: 2vw;
  background-color: rgba(86, 55, 144, 1);
  position: fixed;
  z-index: 11;
  box-shadow: 2px 0px 3px #000;
}

#rightNav {
  height: 100vh;
  width: 2vw;
  left: 98vw;
  background-color: rgba(86, 55, 144, 1);
  position: fixed;
  z-index: 11;
  box-shadow: -2px 0px 3px #000;
}

#footer {
  background-color: rgba(86, 55, 144, 0.95);
  width: 100vw;
  height: 5vh;
  top: 95vh;
  z-index: 10;
  box-shadow: 0px -2px 3px #000;
  position: fixed;
}

#navFill {
  background-color: rgba(240, 240, 240, .95);
  width: 100vw;
  left: -100vw;
  height: 7.5vh;
  z-index: 10;
  position: fixed;
}

#footerFill {
  background-color: rgba(240, 240, 240, .95);
  width: 100vw;
  left: 100vw;
  top: 95vh;
  height: 5vh;
  z-index: 10;
  position: fixed;
}

#leftNavFill {
  height: 100vh;
  width: 2vw;
  background-color: rgba(240, 240, 240, 1);
  top: 100vh;
  position: fixed;
  z-index: 11;
  box-shadow: 2px 0px 3px #000;
}

#rightNavFill {
  height: 100vh;
  width: 2vw;
  left: 98vw;
  background-color: rgba(240, 240, 240, 1);
  top: -100vh;
  position: fixed;
  z-index: 12;
  box-shadow: 2px 0px 3px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
  <i class="fa fa-bars fa-3x" id="navBars"></i>
  <ul id="navigation">
    <li id="homeNav" class="navigation">Home</li>
    <li id="aboutNav" class="navigation">About</li>
    <li id="portNav" class="navigation">Portfolio</li>
    <li id="contactNav" class="navigation">Contact</li>
  </ul>
</nav>
<div id="leftNav"></div>
<div id="rightNav"></div>
<footer id="footer">

</footer>
<div id="leftNavFill"></div>
<div id="rightNavFill"></div>
<div id="navFill"></div>
<div id="footerFill"></div>

Here is the Updated Fiddle

And also as soon as the mouse enters the div you are animating navFill and others which are not the same divisions to which the mousenter event is binded. So the mouseleave event executes at the same time because of the animation which cause the div to animate and thus the mouseleave event executes.

Comments