Question

以下是我的功能：

function dropmenu() {
    $(".dropdownitem").show('slow');
}
function hidemenu() {
    $(".dropdownitem").hide('slow');
}

这是我的下拉菜单：

<div id="dropdown" class="ns" onmouseover="dropmenu()" onmouseout="hidemenu()">
    <p id="dropper">Shortcut Menu</p>
    <p class="dropdownitem">Shortcut menu item</p>
    <p class="dropdownitem">Something</p>
    <p class="dropdownitem">Seomthing else</p>
    <p class="dropdownitem">Test menu item</p>
    <p class="dropdownitem">More testing</p>
    <p class="dropdownitem">Stuff</p>
    <p class="dropdownitem">More stuff</p>
</div>

问题在于，当我将鼠标移出快捷菜单时，它会一直上下，上下，上下移动....

有什么问题？

Answer 1

elclanrs的回答将修复弹跳，另一种解决方案是将所有内容放入应该下拉的div中

<div id="dropdown" class="ns" onmouseover="dropmenu()" onmouseout="hidemenu()">
<div class="dropdownshow">
  <p id="dropper">Shortcut Menu</p>
  <p class="dropdownitem">Shortcut menu item</p>
  <p class="dropdownitem">Something</p>
  <p class="dropdownitem">Seomthing else</p>
  <p class="dropdownitem">Test menu item</p>
  <p class="dropdownitem">More testing</p>
  <p class="dropdownitem">Stuff</p>
  <p class="dropdownitem">More stuff</p>
</div>
</div>

然后显示整个下拉div

function dropmenu() {
$(".dropdownshow").show('slow');
 }

或

   $(document).on("mouseover", "div.overout" , function() {
   $(".dropdownshow").show('slow');    
     }).mouseout(function(){
        $(".dropdownshow").hide('slow');
     });

在您将动画同时应用于7个单独的元素导致弹跳之前，这仅适用于1

Answer 2

stop

function dropmenu() {
    $(".dropdownitem").stop.(1,1).show('slow');
}
function hidemenu() {
    $(".dropdownitem").stop(1,1).hide('slow');
}

下拉菜单不断上下

2 个答案: