這篇文章給大家深入介紹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中文網其他相關文章！
