Javascript(七十二)jquery中的animate方法

.animate 实现动画效果 ,这与我们之前封装的完美运动框架差不多的。但是他这个默认的运动形式不是缓冲运动,是属于慢快慢。

第一个参数:对象,样式名:样式最终效果

第二参数:动画持续时间

第三参数:运动形式:仅有两种 ‘linear’:匀速 ‘swing’:慢快慢(默认)可省略。

第四个参数:回调函数,动画结束时执行。
在这里插入图片描述
如果想拓展更多的运动形式,可以引入jquery-ui框架(类似于boostrap,通过class名,添加样式),但是基本被淘汰了。https://www.jqueryui.org.cn/demo到官网下载js文件,然后在相应页面引入js文件,之后看官网的demo进行仿照就行。引入效果之后,jquery的函数都会变成增强版的函数。
在这里插入图片描述
animate补充:
在这里插入图片描述

在上述当中,如果当缩小的过程当中,再次点击,元素会继续缩小,并缩小之后又产生第二次动画。这不符合我们的设想,我们的设想就是当我再次点击时,上次动画就必须关闭了,然后在我现有的基础上再去执行我的下一次动画。因此需要一个停止上一次动画的函数,才能够执行下一次的。

.stop 停止动画

第一个参数:1.无实参时,停止第一个动画,当时后续动画继续运动 2.第一个实参为true时,停止所有的动画效果,包括后续动画。

第二参数:第一个已经设置true,第二个参数也设置为true时,此时停止所有的动画,包括后续动画,不包括回调函数里的动画。并且让当前正在运行的动画直接到达目的值,即回调函数也可以立马执行
在这里插入图片描述
.stop(true)
在这里插入图片描述
.stop(true,true)
在这里插入图片描述
.finish() 停止所有的动画,包括后续动画,并且让所有的动画都到达目的值,包括回调函数里的动画
在这里插入图片描述
总结出一个小技巧就是,在我们设置动画之前,都要设置一下stop(true),停掉上一次动画效果在执行下一次的动画.
在这里插入图片描述
.delay() 动画延迟。

参数:延迟时间
在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //动画函数 obj---要执行动画的对象 json---要执行到的目标的参数对象 fn为执行完成后的回调函数(可以再次调用此方法按照上面格式传参--顺序执行多个动画) //调用例: //zIndex:1000 //透明度opacity: 数字类型----小数---放大100倍 // my$("btn1").onclick = function () { // var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2}; // animate(my$("dv"), json1, function () { //var json2={"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000} // animate(my$("dv"),json2,function(){按照此格式多次重复添加动画将会顺序执行} ); // }); // }; function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } if (flag) { //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if (fn) { fn(); } } //测试代码 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20); }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值