如何优化此jQuery代码？

Question

I have some experimental script, that makes animation of ul list element background-position, when list element is hovered. Is there another way to manage this task ? or just optimize this code ?

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

Answer 1

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);
    }
  );
});

As the basic optimization code, I could only reposition the jQuery statement where the " css() " method is called in the first function section.

Hope it helps.

Answer 2

Change the background to a gif when hovered. Best preformance you will get.

Answer 3

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 4

The best way to optimize a 40 millisecond timer interval is to not call expensive jQuery functions within it. Store the call to $('.animate') in a variable outside the interval function, then loop through it with for like a normal array, and use standard DOM properties to change the styles of each element. That's the gist of it, I added in some code reorganization to make things a bit simpler as well.

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);
  }
);});

Try it: http://jsfiddle.net/nDgSE/4/