Question

我有一些实验脚本，当列表元素悬停时，它会生成ul列表元素background-position的动画。有没有其他方法来管理这项任务？或者只是优化这段代码？

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

作为基本优化代码，我只能重新定位在第一个函数部分中调用“css()”方法的jQuery语句。

希望它有所帮助。

Answer 2

悬停时将背景更改为gif。你将获得最佳表现。

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

优化40毫秒定时器间隔的最佳方法是不要在其中调用昂贵的jQuery函数。将对$('.animate')的调用存储在interval函数之外的变量中，然后使用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);
  }
);});

试一试：http://jsfiddle.net/nDgSE/4/

如何优化这个jQuery代码？

4 个答案: