Question

我有一个简单的底部菜单栏，大部分都是隐藏的，直到有人将鼠标悬停在一个透明的div上。此时底部菜单栏是slideToggle（）＆＃39; ed

<script type="text/javascript">
         $(document).ready(function () {

                $('#bottomBoxThinCover').on("mouseover", function () {
                    $('#bottomBox').slideToggle();

                });

                $('#bottomBox').on("mouseleave", function () {
                    $('#bottomBox').slideToggle();

                });
        });
 </script>

然而，如果有人只是错误地将鼠标移到它上面，它仍会弹出并且很烦人。我怎么能稍微延迟这个动作（比如0.5s），基于鼠标指针必须等待透明div才能触发？

Answer 1

您可以通过使用setTimeout函数添加一点暂停来执行此操作：

$('#bottomBoxThinCover').on("mouseover", function () {
    $(this).data('over', setTimeout(function() {
        $('#bottomBox').slideToggle();
    }, 500));
})
.on('mouseout', function() {
    clearTimeout($(this).data('over'));
});

这个想法是你在鼠标悬停时设置超时，并在mouseout上清除它。为了保存超时ID，您可以使用元素数据存储。

在触发jquery slideToggle（）之前引入一个小延迟

1 个答案:

演示：http://jsfiddle.net/b62bhtab/