等待300毫秒,然后使用jQuery向下滑动菜单

Question

我试过这个js代码:

<script type="text/javascript">

       $(document).ready( function() {
            var timer;
            $('.top-menu-first-ul li').hover(function(){
                        if(timer) {
                                clearTimeout(timer);
                                timer = null
                        }
                        timer = setTimeout(function() {
                                   $(this).find('ul').slideToggle(100);
                        }, 500)
            },
            // mouse out
            });
        });


</script>

用这个HTML:

<ul class="top-menu-first-ul">
    <li>
        <a href="http://google.com">Google</a>
        <ul class="top-menu-second-ul">
            <li><a href="http://translate.google.com">Google Translate</a></li>
            <li><a href="http://images.google.com">Google Images</a></li>
            <li><a href="http://gmail.google.com">Gmail</a></li>
            <li><a href="http://plus.google.com">Google Plus</a></li>
        </ul>
    </li>
    <li>
        <a href="http://facebook.com">Facebook</a>
    </li>
    <li>
        <a href="http://twitter.com">Twitter</a>
    </li>
</ul>

但它不起作用.

我想在显示子菜单时,例如谷歌链接,其他将在300毫秒后出现.

因此,当用户快速将鼠标悬停在其上并且不会在悬停链接上停留至少300毫秒时,我需要阻止加载子菜单.

然后我需要在他离开链接时停止执行代码(或向上滑动).因为如果他经常一次又一次地翻过来然后回到一个副本,他就会停止盘旋,而代码仍在执行自己多少次将鼠标悬停在链接上.我需要以某种方式防止这种情况发生.

编辑:我需要解决这个问题没有像hoverIntent等插件,如果可能的话,只需简单的javascript和jQuery

Answer 1

使用stop()防止动画怪事并delay()等待300毫秒.也hover()不赞成我会建议使用on(),而不是:

$('.top-menu-first-ul li').on({
  mouseover: function() {
    $(this).find('ul').stop(1,1).delay(300).slideDown(100);
  },
  mouseleave: function() {
    $(this).find('ul').stop(1,1).slideUp(100);
  }
});

演示: http ://jsfiddle.net/elclanrs/6dtWz/