如何優化這個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); 
    } 
); 
}); 

由於基本的優化代碼，我只能重新jQuery的聲明，其中「css()」的方法是所謂的第一功能部分。

希望它有幫助。

Answer 3

更改鼠標懸停時的背景爲GIF。最好的表現你會得到。

Answer 4

優化40毫秒定時器間隔的最佳方法是不要調用其中的昂貴jQuery函數。通過它與for類似於一個普通數組存儲呼叫到$('.animate')在一個可變的間隔功能外，然後循環，並使用標準的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); 
    } 
);}); 

試試：http://jsfiddle.net/nDgSE/4/