Question

我对jquery很新，并且在滑动和滑动事件方面存在b / m问题。

我有水平导航栏，有5个按钮（作为列表项目，如运动，品牌等），它们本身都包含在id为shoppingNav的div中。

我有一个slideown菜单，其中包含CSS display:none（div为submenu_bg）。

当我鼠标悬停submenu_bg时，我希望#shoppingNav滑落，直到我从#shoppingNav鼠标移开时保持可见状态。我希望悬停时各个按钮都有fadeIn个不同的图标，但是在我从导航栏上的整个鼠标输出（#shoppingNav）之前，submenu_bg应保持可见。

目前正在发生的事情是submenu_bg从一个按钮悬停到另一个按钮时继续向下滑动。

你可以检查我想要的效果nike.com。我无法弄清楚如何做到这一点。对此的任何帮助将受到高度赞赏。

Jquery代码：

$(function(){
$('#shoppingNav').on('mouseover',function(){
    $('#submenu_bg').slideDown(200);
    });

$('#shoppingNav').on('mouseout',function(){
    $('#submenu_bg').stop().slideUp(200);
    });
});

<div id="shoppingNav">
        <ul>
        <li id="sports"><a href="#"></a></li>   
            <li id="brand"><a href="#"></a></li>                        
            <li id="clothing"><a href="#"></a> </li>                        
            <li id="footwear"><a href="#"></a></li>                         
            <li id="hotdeals"><a href="#"></a></li>
        </ul>
        <div id="submenu_bg"><img src="_images/submenu_bg1.png" alt="some background"/></div> 

</div>

Answer 1

使用超时，然后在将鼠标悬停在新列表元素上时清除该超时，以便不再次滑动子菜单：

$(function(){
    var timer;
    $('#shoppingNav').on({
        mouseenter: function(){
            clearTimeout(timer);
            if (!$('#submenu_bg').is(':visible'))
                $('#submenu_bg').slideDown(200);
        },
        mouseleave: function(){
            timer = setTimeout(function() {
                $('#submenu_bg').slideUp(200);
            }, 500);
        }
    });
});

FIDDLE

Answer 2

这似乎与包装事件处理程序的方式有关。

我玩弄了这个并设法让它运转here。

$('#shoppingNav').on('mouseover',function(){
  $('#submenu_bg').slideDown(200);
});

$('#shoppingNav').on('mouseout',function(){
  $('#submenu_bg').stop().slideUp(200);
});

jquery slideUp（）和slideDown（）问题

2 个答案: