jQuery中progress的用法-创新互联

这篇文章给大家分享的是有关jQuery中progress的用法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联公司于2013年开始，先为延安等服务建站，延安等地企业，进行企业商务咨询服务。为延安企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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中progress的用法就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

文章题目：jQuery中progress的用法-创新互联
网站地址：https://www.cdcxhl.com/article16/hjigg.html

成都网站建设公司_创新互联，为您提供面包屑导航、软件开发、外贸建站、品牌网站建设、自适应网站、企业网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容

​jQuery中progress的用法-创新互联

jQuery中progress的用法-创新互联