1

私には2つの解決策があります。メソッドを使用するそれらの最初のものanimate：

http://jsfiddle.net/g9aK8/3/

問題は遅延にあります。たとえば400pxでタイマーを一時停止して再開すると、すべての遅延を再度待機する必要があります（バーの速度は絶対に遅くなります）。

私が使用した2番目のソリューションではinterval：

http://jsfiddle.net/6wNcd/1/

見た目は良くなりましたが、数分後にこれを止めようとすると、30秒ほど待たなければならなくなりました。ここintervalでその小さな値を使用することが正しいかどうかはわかりません。

これを賢く行う方法について何かアイデアはありますか？

4

2 に答える 2

1

私がテストしたこのjqueryコードを試してみてください、そしてそれはうまく働いています

$('#button').hover(function() {
    $(this).text('pause');
    $('#bar').stop();
}, function() {
    $(this).text('play');
    var w=$('#bar').css('width');
    var val=parseInt((6000*(500-parseInt(w))/500));
    $('#bar').animate({width: '500px'}, val, 'linear', function() {
        $('#bar').css('width', '0px');                      
    });
});
​​
于 2012-04-22T16:10:45.087 に答える
0

最初の例では、アニメーションを再開するたびに、アニメーション化するピクセルが数ピクセルしかない場合でも、常に2秒のアニメーションを設定しているため、アニメーションの進行が遅いように見えます。再起動時に同じ速度で続行する場合は、アニメーションに残っている距離に応じて時間をスケーリングする必要があります。

これは、残り時間に応じて時間をスケーリングする最初の例の修正バージョンです。

$('#button').click(function() {
    if($(this).text() == 'play') {
        $(this).text('pause');
        var box$ = $('#box');
        var left = parseInt(box$.css("left"), 10) || 0;
        box$.animate({ left:'150px' }, 2000 * ((150 - left) / 150), 'linear');
    }
    else {
        $(this).text('play')
        $('#box').stop();
    }
})

あなたはそれがここで働くのを見ることができます：http：//jsfiddle.net/jfriend00/TVg7x/

2つのオプションから、最初のバージョンを選択します。これは、アニメーションが停止している場合でも、2番目のバージョンではインターバルタイマーが実行されたままになるためです。これは、特にモバイルでのCPU使用率には適していません。

于 2012-04-22T15:45:43.490 に答える