本篇文章给大家深入介绍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（三）的详细内容。更多信息请关注PHP中文网其他相关文章！
