Question

使用jQuery进行动画制作非常简单。这是一个在2秒内动画从0到1000的数字的例子：

var $h1 = $('h1'),
    startValue = parseInt($h1.text(), 10),
    endValue = parseInt($h1.data('end-value'), 10);
$({ int: startValue })
  .animate({
    int: endValue
  }, {
    duration: 2 * 1000,
    step: function () {
      $h1.text(Math.ceil(this.int));
    }
  });

工作示例：http://codepen.io/troywarr/pen/NpjyJE?editors=1010#0

这个动画看起来不错，但是在动画期间的任何时候都很难读取数字，因为下一个数字会在几毫秒内取代它。理想情况下，我想在相同的时间长度内设置动画，但使用较少的步骤（增加更新间隔的长度），以便在动画时更容易一目了然地读取数字。

jQuery似乎不能直接控制动画中的步数，也不能直接控制更新间隔;它似乎只接受一个接收插值的step function。

有没有办法调整jQuery用于在其持续时间内插入动画的步数？

Answer 1

这是我用来模拟这种方法的方法，它可能适用于日常用途。然而，从性能的角度来看，这并不理想，因为jQuery仍然会调用step函数与原来相同的次数。

var $h1 = $('h1'),
    startValue = parseInt($h1.text(), 10),
    endValue = parseInt($h1.data('end-value'), 10),
    stepCounter = 0,
    showNthStep = 8;
$({ int: startValue })
  .animate({
    int: endValue
  }, {
    duration: 2 * 1000,
    step: function () {
      if (stepCounter++ === showNthStep) {
        $h1.text(Math.ceil(this.int));        
        stepCounter = 0;
      }
    },
    complete: function () {
      $h1.text(Math.ceil(this.int));        
    }
  });

工作示例：http://codepen.io/troywarr/pen/NpjYWo?editors=1010#0

这使用变量stepCounter来计算对step函数的调用，并且每8次更新一次（showNthStep}。

请注意，如果complete函数未被调用为8次的倍数，则必须使用step函数来更新最后一次。

如何延长更新间隔或减少jQuery的.animate（）方法的步骤数？

1 个答案: