jQuery animate() 显示动画进度的百分比

Question

使用以下代码片段：http://jsfiddle.net/sylouuu/V7a3Y/2/，我想在动画的#log中显示0%到100%的进度，100%很容易通过回调函数实现...是否可能做到这一点？

问候

- Syl

Answer 1

jQuery动画进度回调函数是在1.8版本中引入的：

$('#a').animate({
    opacity: 1,
    width: 400,
    percent: 100
}, {
    progress: function(animation, progress, msRemaining) {
        $('#log').html(100 * progress + "%");
    }
});

- Gyuri

Answer 2

我相信你可以通过使用步骤函数来实现

 $('myelementid').animate({
   opacity: 1,
   height: 100,
   percent: 100
 },
 {
   step: function(now, fx) {
      //not sure if this is 100% percent accurate 
      //but at least you have a value at every step of the animation
      console.log( this.percent );          
   },
   complete: function(){
       //do not forget to reset percent at the end of the animaton
       //so on the next animation it can be calculated from starting value of 0 again
       this.percent = 0;
   }
 });

希望这能有所帮助。

- Tibor