本篇文章给大家深入介绍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代码：
登录后复制
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代码：
登录后复制
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（三）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2737085.html
