Question

例如，如果您将鼠标悬停在“ Wall”上，然后将光标移到下面逐渐消失的下拉菜单上，我已经在JS小提琴中做了一个例子。在使用它之前，它将先淡出然后淡入。

我尝试使用超时并检查它是否是相同的悬停父母。那样行不通，因为当您完全关闭它时，它会一直保持下去。

  $（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淡入淡出效果

1 个答案: