这篇文章给大家分享的是有关jQuery中progress的用法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
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的用法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。