本篇文章给大家深入介绍jquery中animate的用法，接着之前的文章【jquery之深入学习animate（二）】让大家可以进一步了解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><p class="wrap">    <p class="block"></p>    <p class="block"></p>    <p class="block"></p>    <p class="block"></p>    <p class="block"></p>    <p class="block"></p></p>
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代码：
 <p class="progressbar">     <p class="progress"></p> </p>
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); }});
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。
以上就是jquery之深入学习animate（三）的详细内容。