Question

所以我设法为一个效果很好的菜单创建了一个setTimout slideUp / Down函数 - 但是在某些情况下，当用户将鼠标悬停在链接上时，它们的子链接会快速上下滑动 - 我知道这个问题很典型但是我尝试了不同的事情。

这是一个有效的演示 - 你可以看到你是否将鼠标悬停在功能疯狂的链接上 http://jsfiddle.net/eA2HL/2/

jQuery('.nav.mainmenu > li').each(function() {
    var t = null;
    var $this = jQuery(this);
    var result = jQuery('#result');
    $this.hover(function() {
        t = setTimeout(function() {
            if($this.find('ul').length > 0) {
                result.slideDown(200, function() {
                    if($this.is(':visible')) {
                        $this.find('ul').show();
                    }
                });
            }
            t = null;
        }, 300);
    }, function() {
        if (t) {
            clearTimeout(t);
            t = null;
        } else {
            $this.find('ul').hide(0);
            result.slideUp(333, function() {
                $this.find('ul').hide(0);
            });
        }
    });
});

Answer 1

使用.stop(1,1)（与.stop( true , true )相同）将有助于清除一些动画构建：

jQuery('.nav.mainmenu > li').each(function() {
        var t = null;
        var $this = jQuery(this);
        var result = jQuery('#result');
        $this.hover(function() {
            t = setTimeout(function() {
                if($this.find('ul').length > 0) {
                    result.stop(1,1).slideDown(200, function() {  // HERE
                        if($this.is(':visible')) {
                            $this.find('ul').show();
                        }
                    });
                }
                t = null;
            }, 300);
        }, function() {
            if (t) {
                clearTimeout(t);
                t = null;
            } else {
                $this.find('ul').hide(0);
                result.slideUp(333, function() { 
                    $this.find('ul').hide(0);
                });
            }
        });
    });

<强> fiddle demo

Answer 2

您还可以查看＆＃34;结果＆＃34;像这样动画（如果动画不动画）：

 if($(result).is(':animated')){
  return false;
  }

快速鼠标悬停时jQuery幻灯片菜单抖动行为

2 个答案: