jQuery中Animate进阶用法（三）

progress
Type: Function( Promise animation, Number progress, Number remainingMs )
每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。(version added: 1.8)

Number progress表示当前动画进展程度0~1  Number remainingMs 就是变化到最终动画属性值还差多少

CSS

.block {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  .wrap{position:relative;float:left;width:400px;}
  #go{border:1px solid red;color:blue;cursor:pointer;}

Html

<p><button id="go">Run>></button></p>
<div class="wrap">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

Javscript

var j=0,k=0;
    $( "#go" ).one("click",function() {
      $( ".block:first" ).animate(
          {
            left: 100,top:200
          },
          {
            duration: 1000,
            step: function( now, fx ){
                k++;
                if(k==1) console.log(fx);
              $( ".block:gt(0)" ).css( fx.prop, now );//注意到prop的变化性
            },
            progress:function(a,p,r){
                j++;
                if(j==1){console.log(a);console.log(a.props)}
                a.progress(function(){
                    console.log("Hi"+j);//注意progress的运行时机
                });                
                console.log(p+"---"+r);//注意p,r的变化
            }
      });
    });

控制台观察输出之后的值，你会有所得！

做个简单的进度条动画，开始是红色，到30%时候变为绿色，到60%变为粉色，没有用颜色变化插件，选择的是替换class。让大家对这个progress、step应用有个了解，愿此例抛砖引玉！

CSS

.progressBar{float:left;position:relative;width:500px;height:30px;border:1px solid orange;background-color:#999;}
  .progressBar p{padding:0;margin:0;position:absolute;left:0;top:0;height:30px;}
  .red{background-color:red;}
  .green{background-color:green;}
  .pink{background-color:pink;}

Html

 <div class="progressBar"> 
    <p class="progress"></p>
 </div>

Javascript

$(".progressBar p").addClass("red").animate(
        {"width":500},
        {
            duration:5000,
            progress:function(a,p,r){
                if(p>0.3&&!$(this).hasClass("green")) $(this).removeClass().addClass("green");
                if(p>0.6&&!$(this).hasClass("pink")) $(this).removeClass().addClass("pink");
            }
        }
    );

从stackoverflow中看到有人问到此问题，你也可以发表自己的看法

http://stackoverflow.com/questions/19295311/jquery-animate-progress-bar-percentage-faster-than-the-bar-step

http://stackoverflow.com/questions/8970887/jquery-animate-show-the-percent-of-the-animation-progress

例子下载