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

Question

使用以下代码片段： http://jsfiddle.net/sylouuu/V7a3Y/2/ 我想在动画的 #log 中显示从 0% 到 100% 的进度百分比，通过回调很容易达到 100%...

可以这样做吗？

问候

Answer 1

jQuery 动画进度回调在 1.8 中引入：

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

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

希望这会有所帮助。