3

では、CSSの「left」プロパティの値を次のように変更します。

s_list.style.left = left - amount + 'px';

s_listは、UL要素である変数です。この行は、ボタンをクリックすると実行されます。しかし、効果は瞬時に発生し、あらゆる種類のアニメーションが残っているのをすばやく確認できます。これを遅くしたり、変更に構成可能な遅延を追加したりするために、純粋なJSでできることはありますか？

私の作業デモを見るには：

http://jsfiddle.net/benhowdle89/RCkPq/

そしておそらく解決策を提案してください！

4

3 に答える 3

3

基本的なアニメーションには、setTimeoutまたはを使用できますsetInterval。ただし、最新のブラウザでは時代遅れです。アニメーション化するより効率的な方法は、 を使用することrequestAnimationFrameです。

function animate(things){
    //Do stuff here.
    requestAnimationFrame(animate);
}

ユーザーが実際に要素を見ることができる場合にのみ、画面を再描画し"How is this different?"ます。requestAnimationFrameユーザーが別のタブにいる場合、またはページを下にスクロールしている場合、再描画されません。コンピューターに記憶を保存します。

残念ながら、これまでのところ、すべてのブラウザには依然としてプレフィックスが必要です。ここに修正があります：

if ( !window.requestAnimationFrame ) {
    window.requestAnimationFrame = ( function() {
        return window.webkitRequestAnimationFrame ||  //webkit
        window.mozRequestAnimationFrame ||            //mozilla
        window.oRequestAnimationFrame ||              //opera
        window.msRequestAnimationFrame ||             //IE!
        function(callback, element) {
            window.setTimeout( callback, 1000 / 60 ); //not supported
        };
    } )();
}

更新しました

ライブデモ:

  1. http://jsfiddle.net/DerekL/4wLsC/
  2. http://jsfiddle.net/DerekL/4wLsC/4/- 画像を循環(まだ jQuery はありません!)
于 2012-06-06T23:08:45.050 に答える
1

あなたがしていることは、クリックですぐに値を最終的な位置に変更することです。

アニメーション化するには、フレームごとに少しずつ左の値を変更しながら、より長い時間をかけて繰り返す必要があります。

アニメーションを実現するために、各ステップで要素が数ピクセルずつ移動するsetIntervalまたは のチェーンを使用してみてください。setTimeout

例：

function move(){
   s_list.style.left = s_list.style.left - amount/10 + 'px';
   if (s_list.style.left.slice(0, -2) > desired_offset){
      setTimeout(move,10);
   }
}

これにより、要素が amount/10 ピクセルだけ移動し、目的の位置に到達するまでアクションが繰り返されます。amount/10 は、任意のレート/速度に変更できます。

編集:文字列/数値比較用に .slice を追加 (クレジット: Wex)

Double EDIT : 以下のコメントで Wex を聞いてください。

于 2012-06-06T22:43:25.320 に答える
0

コードを定期的に実行するには、setInterval関数を使用する必要があります。

または単にjQuery を使用します。

于 2012-06-06T22:39:00.677 に答える