登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery之深入学习Animate(三)

青灯夜游
发布: 2018-11-13 14:43:44
转载
1478人浏览过

本篇文章给大家深入介绍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>Run&gt;&gt;</button>
</p>
<p>
    </p><p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <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> 
    </p><p></p>
 
登录后复制

Javascript代码:

$(".progressBar p").addClass("red").animate({
	"width": 500
}, {
	duration: 5000,
	progress: function(a, p, r) {
		if(p &gt; 0.3 &amp;&amp; !$(this).hasClass("green")) $(this).removeClass().addClass("green");
		if(p &gt; 0.6 &amp;&amp; !$(this).hasClass("pink")) $(this).removeClass().addClass("pink");
	}
});
登录后复制

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

以上就是jQuery之深入学习Animate(三)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号