0

マウスオーバーでループに残り、マウスリーブで終了するアニメーションを使用して、水平スライドをアニメーション化しようとしています。これは、私がこれまでに持っているもののjsfiddleの例です。

ループは機能していますが、反復間でアニメーションが遅くなります。私は何を間違えていますか？私の目標を達成するためのより良い方法はありますか？

以下のコードも含まれています。

 <div id="holder">
        <ul class="box_holder">
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
        </ul>
    </div>
    <div class="left"></div>
</div>

<script>
function scrollList(){
    $("ul").animate({
        "left" : "-=30px"
    }, 1000,scrollList);
}

$(".left").hover(function(){
    scrollList("left");
},
function(){
    $("ul").stop();
});
</script>
4

2 に答える 2

2

より良いアプローチは、ターゲットアニメーションを左の最大値にし、アニメーションの速度をボックスの数に基づくことだと思います。また、アニメーションには「線形」イージングを使用します。
このようなもの：

function scrollList(){
    var boxes = $('.box').length;
    $("ul").animate({
        "left" : "-=" + 30*boxes
    }, 700 * boxes, "linear", scrollList);
}

$(".left").hover(function(){
    scrollList("left");
},
function(){
    $("ul").stop();
});

http://jsfiddle.net/uF7mX/2/

于 2013-04-28T10:34:50.280 に答える
0

アニメーション機能のドキュメントをご覧ください。イージングは​​、アニメーションのタイミングを指定します。この場合、デフォルト設定はニーズに合わないので、このlinearバージョンを試すことをお勧めします。

于 2013-04-28T10:35:08.937 に答える