jQuery动画速度慢且不稳定

我的jQuery动画运行得非常缓慢和起伏。我觉得我已经尽了一切努力来加速它，比如在开始新的动画之前停止现有的动画，只在需要时执行动画，并使用jquery.gsap.js。我也尝试过使用css动画，但似乎无法获得所需的平滑度。有人知道我怎样才能加快速度吗

这里有一个链接

items=$（“#垂直条ul li”）；
项目。每个（功能（i）{
$（this）.hover（函数（）{
大小=$（窗口）.width（）/items.length；
项目。每个功能（j）{
如果（j！=i）{
如果（$（this）.width（）>size-（40.0/items.length）+5）{
$（this.stop（）；
$（this.animate（{width:size-（40.0/items.length）}，“fast”）；
}
}
}); 
$（this.stop（）；
动画（{width:size+40}，“fast”）；
},
函数（）{}
);
});

尝试将

线性
添加到
测量属性中；也可以在动画开始之前调整
$.fx.interval

$.fx.interval = 100;

items = $("#vertical-strips ul li");
     items.each(function(i){
        $(this).hover(
            function(){
                size = $(window).width()/items.length; 
                items.each(function(j){
                    if(j != i ){
                        if($(this).width() > size - (40.0/items.length) + 5 ){
                            $(this).stop();
                            $(this).animate({width:size - (40.0/items.length)},  "fast", "linear");
                        }
                    }
                }); 
                $(this).stop();
                $(this).animate({width:size + 40},  "fast", "linear");  
            },
            function(){
            }
        );
    });

jsFIDLE
非常简单，看看animate（）函数：

$(this).animate({width:size + 40},  "fast");

您的“快速”选项可以更改为任何值。可以将动画计时设置为更快。例如，只需将“fast”值替换为“5”

检查

看看animate的properties文档。
我在这里所做的只是提到慢、快，。。。我只给了它10秒钟

注意：如果您想要更高的速度，请通过较小的值来降低速度
那么10

这可能对你有帮助


JS

  items = $("#vertical-strips ul li");
         items.each(function(i){
            $(this).hover(
                function(){
                    size = $(window).width()/items.length; 
                    items.each(function(j){
                        if(j != i ){
                            if($(this).width() > size - (40.0/items.length) + 5 ){
                                $(this).stop();
                                $(this).animate({width:size - (40.0/items.length)}, 10);
                            }
                        }
                    }); 
                    $(this).stop();
                    $(this).animate({width:size + 40}, 10); 
                },
                function(){
                }
            );
        });

它们对我来说很光滑。这可能是你的系统马力的问题，对我来说也很顺利。我发现，在使用jquery动画时，如果打开浏览器的“开发工具”面板，事情往往会变得更加复杂。也许你的问题的一部分？在js中，1000是1秒——10000是10秒——10是十分之一秒
  items = $("#vertical-strips ul li");
         items.each(function(i){
            $(this).hover(
                function(){
                    size = $(window).width()/items.length; 
                    items.each(function(j){
                        if(j != i ){
                            if($(this).width() > size - (40.0/items.length) + 5 ){
                                $(this).stop();
                                $(this).animate({width:size - (40.0/items.length)}, 10);
                            }
                        }
                    }); 
                    $(this).stop();
                    $(this).animate({width:size + 40}, 10); 
                },
                function(){
                }
            );
        });