JavaScript mouseenter 和 mouseleave 淡入淡出效果故障

Question

如果您将鼠标悬停在“墙”上，我在 JS fiddle 中做了一个示例，然后将光标移到下方淡入淡出的下拉菜单上。在你可以使用它之前，它会先淡出然后淡入。

我尝试过使用超时并检查它是否是同一个悬停父级。这不起作用，因为当你完全取下它时，它会一直亮着。

https://jsfiddle.net/eqxDev/t49e7amz/

$(document).ready(function () {

$('.places .place-link, .place_dropdown').one().on('mouseenter', function () {
    $("#place_link_" + $(this).data('placement')).addClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).addClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).fadeIn(350);
});

$('.places .place-link, .place_dropdown').one().on('mouseleave', function () {
    $("#place_link_" + $(this).data('placement')).removeClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).removeClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).fadeOut(350);
});

});

当您将鼠标悬停在项目 Wall 上时，当您尝试将鼠标悬停在下面的项目列表上时，它不应淡入然后退出。

提前致谢。

Answer 1

问题是因为mouseleave/mouseenter 在从选项卡移动到下面的菜单时被触发。要解决此问题，请在淡入淡出之前添加 stop() 调用，以便在添加新动画之前将动画队列移动到末尾：

$(document).ready(function() {
  $('.places .place-link, .place_dropdown').on('mouseenter', function() {
    var placement = $(this).data('placement');
    $("#place_link_" + placement).addClass('hovered');
    $("#place_dropdown_" + placement).addClass('hovered').stop(true).fadeIn(350);
  });

  $('.places .place-link, .place_dropdown').on('mouseleave', function() {
    var placement = $(this).data('placement');
    $("#place_link_" + placement).removeClass('hovered');
    $("#place_dropdown_" + placement).removeClass('hovered').stop(true).fadeOut(350);
  });
});

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.places li {
  display: inline-block;
  margin-right: 100px
}

.place_dropdown {
  border: 1px solid black;
  margin-top: -15px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="places">
  <li class="place-link" id="place_link_wall" data-placement="wall">
    <span class="icon-title">Wall</span>
  </li>
  <li class="place-link" id="place_link_floor" data-placement="floor">
    <span class="icon-title">Floor</span>
  </li>
</ul>

<div class="place_dropdown" id="place_dropdown_wall" style="display: none" data-placement="wall">
  <span>Wall</span>
  <ul>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
  </ul>
</div>
<div class="place_dropdown" id="place_dropdown_floor" style="display: none" data-placement="floor">
  <span>Floor</span>
  <ul>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
  </ul>
</div>

话虽如此，只要对 HTML 进行微小的结构更改，您就可以完全用 CSS 制作这个菜单。