Question

我的jQuery动画运行速度非常慢而且波涛汹涌。我觉得我已经尝试了一切来加速它，比如在开始新动画之前停止现有的动画，只在需要时执行动画并使用jquery.gsap.js。我也尝试过使用css动画，但似乎无法获得所需的平滑度。有没有人有任何想法如何加快它。

以下是jsfiddle链接

<section id="vertical-strips">
    <ul>
        <li style="background-image:url(im1.jpg)">t1</li>
        <li style="background-image:url(im2.jpg)">t2</li>
        <li style="background-image:url(im3.jpg)">t3</li>
        <li style="background-image:url(im4.jpg)">t4</li>
        <li style="background-image:url(im5.jpg)">t5</li>
        <li style="background-image:url(im6.jpg)">t6</li>
        <li style="background-image:url(im7.jpg)">t7</li>
    </ul>
</section>

#vertical-strips {
    width: 100%;
    height: 100vh;
    max-width: 100%;
    overflow: hidden;
}

#vertical-strips ul {
    padding:0;
    margin:0;
    list-style: none;
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
    height:100%;
    overflow: hidden;
}

#vertical-strips ul li {
    margin: 0px;
    display: table-cell;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    font-size: 2vw;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

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");
                }
            }
        }); 
        $(this).stop();
        $(this).animate({width:size + 40},  "fast");    
    },
    function() {}
);
});

Answer 1

尝试将"linear"添加到easings属性;也可以在动画开始之前调整$.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(){
            }
        );
    });

jsfiddle https://jsfiddle.net/mux61p5s/9/

Answer 2

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

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

你的快速＆＃34;选项可以真正更改为任何值。您可以将动画时间设置得更快。只需更换你的快速＆＃34;价值与＆＃34; 5＆＃34;例如。

检查fiddle。

查看动画的属性文档here。

Answer 3

我在这里所做的是提速慢，快......，我只给了它10秒。

注意：如果你想通过给出更小的值来更快地减速然后10

它可能对你有帮助

WORKING:DEMO

<强> 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动画缓慢且波涛汹涌

3 个答案: