このjQueryコードを最適化する方法は？

Question

私は、リスト要素が浮かれているとき、ulリスト要素の背景位置のアニメーションを作成するいくつかの実験的なスクリプトを持っています。 このタスクを管理する別の方法はありますか？またはこのコードを最適化するだけですか？基本的な最適化コードとして

http://jsfiddle.net/jurisKaste/nDgSE/

Answer 1

var c = 0, 
    ids; 

$(function(){ 
    $("li.animate").hover(function() { 
     ids = setInterval(function() { 
      $('.animate').css('backgroundPosition', ((++c==4) && (c=0), (-100 * c) + 'px 0')); 
     }, 40); 
     }, function() { 
      $('.animate').css('backgroundPosition', '0 0'); 
      clearInterval(ids); 
     } 
    ); 
}); 

Answer 2

var c = 0; 
var ids; 
$(document).ready(function(){ 
    $("li.animate").hover(
    function() { 
     var param = '0 0'; 
     ids = setInterval(function() { 
     if (c > 4) { 
      c = 1; 
      param = '0 0'; 
     } 
     else { 
      param = (-100 * c++) + 'px 0'; 
      //alert(param); 
     } 

     $('.animate').css('backgroundPosition', param); 
     //$('#foo').fadeOut(); 
     }, 40); 
    }, 
    function() { 
     $('.animate').css('backgroundPosition', '0 0'); 
     clearInterval(ids); 
    } 
); 
}); 

、私は唯一の「css()」メソッドは最初の機能部に呼ばれているjQueryのステートメントを再配置できます。

希望します。

Answer 3

バックグラウンドをgifに変更します。あなたが得る最高のパフォーマンス。

Answer 4

40ミリ秒のタイマー間隔を最適化する最良の方法は、高価なjQuery関数をその中にコールしないことです。 interval関数外の変数に$('.animate')への呼び出しを格納し、通常の配列のようにforでループし、標準のDOMプロパティを使用して各要素のスタイルを変更します。それがその要点です。コードの再編成を追加して、やり方を少し単純化しました。

var c = 0, ids; 
$(document).ready(function(){ 
    $("li.animate").hover(function() { 
    var ani = $('.animate'), l = ani.length; 

    ids = setInterval(function() { 
     var i, param; 
     if (c >= 5) { 
     c = 1; 
     param = '0 0'; 
     } else { 
     param = (-100 * c++) + 'px 0'; 
     } 

     for (i=0; i<l; i++) { 
     ani[i].style.backgroundPosition = param; 
     } 
    }, 40); 

    }, 
    function() { 
    $('.animate').css('backgroundPosition', '0 0'); 
    clearInterval(ids); 
    } 
);}); 

試してみよう：私はいくつかのブラウザでハードウェアアクセラレーションを使用するCSSアニメーションを、使用していると考えることができますhttp://jsfiddle.net/nDgSE/4/