Question

我有一个动画，在某些div中悬停时会触发。当鼠标位于div中时，将其移动到div中的其他位置会导致悬停效果再次触发。我尝试过使用mouseenter / mouseleave做同样的事情。

如何使该功能仅在mouseenter和mouseleave上触发，而不是在它在选择器内移动时触发？

$('#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 1

根据您的代码，您在同一个悬停事件中调用动画，或者假设您尝试在同一个mouseenter和mouseleave事件中为其设置动画。而不是尝试这样的事情。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

以下是更新的Fiddle

此外，只要鼠标进入div，您就会设置navFill和其他与鼠标输入事件绑定不同的分区的动画。因此，mouseleave事件同时执行，因为动画会使div生成动画，因此执行mouseleave事件。

Answer 2

动画可能会导致整个导航缩小，因此，导航会考虑鼠标＆＃34;只需输入＆＃34;进入导航。

Answer 3

我认为问题出在你的动画DIV（即#navFill，#leftNavFill，#rightNavFill和#footerFill）高于你的非动画DIV（即{{{ 1}}，#nav，#leftNav和#rightNav）。当动画DIV获得动画时，它会重新绘制其下方的非动画DIV，从而触发#footer / mouseenter事件。也许简单来说，只要灰色栏覆盖紫色区域和鼠标，你只需左紫色区域（这会导致mouseleave事件）。反之亦然，当灰色条纹揭开紫色区域时。

所以，问题归结为如何让动画DIV出现在非动画DIV之上，而不是可选择？您可以将CSS属性mouseleave附加到动画DIV。

Demo

只要在选择器内移动鼠标，就会重复悬停功能

3 个答案: