JavaScript mouseenter 和 mouseleave 淡入淡出效果有问题

Question

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

我试过使用超时并检查它是否是同一个悬停父级。这没有用，因为当你完全关闭它时它会继续存在。

$(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 中制作此菜单，这毫无意义。

JavaScript mouseenter 和 mouseleave 淡入淡出效果有问题

JavaScript mouseenter and mouseleave fade effects glitchy

jquery

mouseevent

fadein

fadeout

jquery-hover