Question

我正在尝试创建一个水平菜单，当它悬停时，会扩展词语。问题是当你将它们快速悬停在它们上面时，它们会产生可怕的跳跃效果，看起来很讨厌。我怎样才能防止这种情况，还有更好的方法来编写这个函数吗？

 $(".toggle_hov").hover(function () {
    $(this).find(".toggle_cont").stop().slideToggle();
    $('.toggle_hov.active').not(this).removeClass('active');
    $(this).toggleClass('active');
    var $this = $(this).parent().find('.toggle_cont');
    $(".toggle_cont").not($this).slideUp();
  });

非常感谢

http://jsfiddle.net/Js5Z5/1

Answer 1

我建议你在悬停时使用一些延迟，如果用户在特定时间内徘徊，它只会打开很多。如果你快速移动它，它不会滑开。

 var delay=500, setTimeoutConst;
    $(".toggle_hov").hover(function () {        
        that = $(this);
         setTimeoutConst = setTimeout(function () {
            $(that).find(".toggle_cont").slideToggle();
            $('.toggle_hov.active').not(this).removeClass('active');
            $(that).toggleClass('active');
            var $this = $(this).parent().find('.toggle_cont');
            $(".toggle_cont").not($this).slideUp();
          }, delay)
    }, function(){
         clearTimeout(setTimeoutConst );

      });

此处jsfiddle

如何停止jquery悬停slidetoggle排队

1 个答案: