Question

有人可以帮我吗？

我将其设为水平导航。请参阅我的jsFiddle编码：

 <ul>
    <li >Item 1</li>
    <li >Item 1</li>                        
    <li >Item 1</li>                    
 </ul>

http://jsfiddle.net/k6YT8/

当你在列表项上移动鼠标太快时，它们会变得有弹性，有时它会分成2或3行。

请查看我的jQuery并让我知道我做错了什么？

Answer 1

您需要设置width -

的正确ul

ul {
    display: block; clear: both;
    width:900px; 
}

Fiddle

Answer 2

您应该使用stop（）方法

$('ul li').hover(
        function() {
            //mousein action
            $('ul li').stop(true, true);
            $('ul li.active').animate({
                width:'60'
            },250, function(){
                $(this).removeClass('active');
            });
            $(this).addClass('active').animate({
                width:'360'
            },250, function(){
                $(this).addClass('active');
            });
        },
        function () {
            //mouseout action

        }
    );

请参阅小提琴：http://jsfiddle.net/djwave28/k6YT8/2/

Answer 3

这是因为你每次鼠标悬停一个元素就调用一个函数。这样，您可能会生成一个长队列的函数，最终可能会以各种方式破坏您的动画。为防止出现这种情况，您可以使用stop()方法，停止匹配元素上当前正在运行的动画。
您可以选择使用2个布尔参数调用它：

.stop( [ clearQueue ] [, jumpToEnd ] )

clearQueue从队列中删除所有动画，如果设置为true且jupToEnd指示，当前活动动画是否应立即结束。所以在任何新动画之前调用：

.stop(true,true)

确保停止所有动画，重置队列并立即执行。 Read more here!

jQuery动画正在跳跃

3 个答案: