1

所以我设法为一个效果很好的菜单创建了一个 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);
            });
        }
    });
});
4

2 回答 2

3

使用.stop(1,1)(same as .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);
                });
            }
        });
    });

小提琴演示

于 2012-07-11T15:54:08.100 回答
1

您还可以检查“结果”是否像这样动画（如果动画不动画）：

 if($(result).is(':animated')){
  return false;
  }
于 2012-07-11T16:03:35.727 回答