0

プログレス バーを作成し、CSS でスタイルを設定するスクリプトがあります。それはうまく機能しますが、バーが最後に達すると停止し、スクリプトをループさせて再び開始することができません。プログレスバーが最後に到達したら最初からやり直すように、このスクリプトをループするにはどうすればよいですか?

<script type="text/javascript">
$(document).ready(function() {
var el = $(''#progress'');
el.animate({
width: "100%"
}, 40000);
});
</script>


<style>
#progressKeeper {background:#f2f2f2;display:none;width: 400px;height: 18px;border: 1px         solid #CCC;-moz-border-radius:7px; border-radius:7px;color:#f2f2f2;font-family:Arial;font-    weight:bold;font-style:italic;font-size:.9em;margin-bottom:2000px;}
#progress {background: #005c9e;width: 0;height: 17px;-moz-border-radius:7px; border-    radius:7px;}
</style>
4

2 に答える 2

3

jQuery をやめて、CSS3 を使おう！

#progress {
    animation:progress 40s linear infinite;
    -webkit-animation:progress 40s linear infinite;
}

@keyframes progress {from {width:0} to {width:100%}}
@-webkit-keyframes progress {from {width:0} to {width:100%}}

古いブラウザーをサポートする必要がある場合は、コールバックをanimate関数に渡して、アニメーションを再開するように指示します。このようなもの：

$(function() {
    var prog = $("#progress");
    anim();
    function anim() {
        prog.css({width:0});
        prog.animate({width:"100%"},40000,anim);
    }
});
于 2013-09-25T14:12:38.260 に答える
2

関数にして、その関数を.animate完了ハンドラとして呼び出しに渡します。jQuery().animate()を参照してください。

何かのようなもの：

$(document).ready(function() {
    function animateProgressBar( ) {
        $('#progress').width(0).animate({
            width : "100%"
        }, 40000, animateProgressBar);
    }

    animateProgressBar();
});

(未テスト)

于 2013-09-25T14:12:07.843 に答える