JavaScript mouseenter和mouseleave淡入淡出效果

Question

如果你将鼠标悬停在“Wall”上，那么我已经在JS小提琴中做了一个例子，然后将光标移到下面淡入的下拉菜单上。在你可以使用之前，它会淡出然后淡出。

我已经尝试使用超时并检查它是否是相同的悬停父级。这不起作用，因为当你完全离开它它会保持。

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

});

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

提前致谢。

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制作这个菜单，这是值得的。