jquery - jQuery 动画正在跳跃

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; 
}

小提琴

Answer 2

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

.stop( [ clearQueue ] [, jumpToEnd ] )

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

.stop(true,true)

确保所有动画都停止，队列重置并立即执行。 在这里阅读更多！

Answer 3

您应该使用 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/