這篇文章給大家分享的是有關(guān)jQuery中progress的用法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)公司于2013年開(kāi)始，先為延安等服務(wù)建站，延安等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為延安企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

progress

Type： Function( Promise animation, Number progress, Number remainingMs )

每一步動(dòng)畫(huà)完成后調(diào)用的一個(gè)函數(shù)，無(wú)論動(dòng)畫(huà)屬性有多少，每個(gè)動(dòng)畫(huà)元素都執(zhí)行單獨(dú)的函數(shù)。(version added: 1.8)

Number progress：表示當(dāng)前動(dòng)畫(huà)進(jìn)展程度0~1

Number remainingMs：就是變化到最終動(dòng)畫(huà)屬性值還差多少

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的運(yùn)行時(shí)機(jī)
                });                
                console.log(p+"---"+r);//注意p,r的變化
            }
      });
    });

控制臺(tái)觀察輸出之后的值，你會(huì)有所得！

做個(gè)簡(jiǎn)單的進(jìn)度條動(dòng)畫(huà)，開(kāi)始是紅色，到30%時(shí)候變?yōu)榫G色，到60%變?yōu)榉凵瑳](méi)有用顏色變化插件，選擇的是替換class。讓大家對(duì)這個(gè)progress、step應(yīng)用有個(gè)了解，愿此例拋磚引玉！

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

感謝各位的閱讀！關(guān)于jQuery中progress的用法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章題目：?jQuery中progress的用法-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://chinadenli.net/article16/hjigg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、軟件開(kāi)發(fā)、外貿(mào)建站、品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)