jQuery动画---自定义动画animate()
同步动画
animate(参数对象,time,回调函数)
同时改变多个样式。
$(":button").click(function(){$("div").animate({'width':"300px",'height':"300px",'opacity':0.5,'font-size':'50px'});
});
添加速度和回调函数
$(":button").click(function(){$("div").animate({'width':"300px",'height':"300px",'opacity':0.5,'font-size':'50px'},200,function(){alert("动画完成");});
});
移动动画。需要将div的样式设置成position:absolte,然后在改变left和top的值即可:
$(":button").click(function(){$("div").animate({left:'100px',top:'100px'});
});
位置的自增自减。位置的改变可以自增自减(+=,-=)
$(":button").click(function(){$("div").animate({left:'+=100px',top:'-=100px'});
});
运动模式
有两种速度
- swing 缓动(先快后慢)
- linear 匀速
$(".a").animate({left:"500px"
},2000,'swing');
$(".b").animate({left:"500px"
},2000,'linear');
列队动画
回调函数
嵌套调用回调函数,可以实现队列动画,但是比较繁琐
$(":input").click(function(){$("div").animate({width:"300px"},function(){$("div").animate({height:"300px"},function(){$("div").animate({height:"300px"},function(){$("div").animate({fontSize:"50px"});})});});
});
连缀或顺序排列
链式调用
jQuery支持链式调用。因此可以链式的改变多个样式
$(":input").click(function(){$("div").animate({width:"300px"}).animate({height:"300px"}).animate({fontSize:"50px"});
});
顺序排列
将动画分解,并列的依次调用
$(":input").click(function(){$("div").animate({width:"300px"});$("div").animate({height:"300px"});$("div").animate({fontSize:"50px"});
});
PS
以上方法对于单个元素的样式可以实现列队动画。但是如果同时控制几个元素时,不同的元素同时开始执行。但是执行时是按照队列依次执行自身的动画,如果需要不同的元素之间队列执行,就必须嵌套回调函数
$(":input").click(function(){$(".a").animate({width:"300px"});$(".a").animate({height:"300px"});$(".a").animate({fontSize:"50px"});$(".b").animate({width:"300px"});$(".b").animate({height:"300px"});$(".b").animate({fontSize:"50px"});
});
queue()
如果在一连串的动画后调用改变样式的函数。那么会先改变css样式,后执行动画。
$(":input").click(function(){$(".a").animate({width:"300px"}).animate({height:"300px"}).css("background-color","skyblue" );
});
解决的方法是使用queue函数,该函数会让动画先执行:
$(":input").click(function(){$(".a").animate({width:"300px"}).animate({height:"300px"}).queue(function(){$(".a").css("background-color","skyblue" );});
});
但是,这是如果在queue后再接着调用其他动画时会失效,解决方法是在queue函数的末尾调用next(),同时在queue的匿名函数入口传入next
queue(function(next){… next()});
$(":input").click(function(){$(".a").animate({width:"300px"});$(".a").animate({height:"300px"}).queue(function(next){$(".a").css("background-color","skyblue");next();}).animate({width:"800px"});
});
较老的版本使用dequeue函数达到同样的效果:
$(":input").click(function(){$(".a").animate({width:"300px"});$(".a").animate({height:"300px"}).queue(function(next){$(".a").css("background-color","skyblue");$(this).dequeue();}).animate({width:"800px"});
});
queue还可以得到当前动画的长度
clearQueue()
清理之后没有开始的动画,并且,clearQueue() 方法移除任何排队的函数。
$(":input").click(function(){$(".a").animate({width:"300px"},2000);$(".a").animate({height:"300px"},2000);$(".a").animate({fontSize:"50px"},2000);$(".a").queue(function(next){$(".a").css("background-color","skyblue");$(this).dequeue();}).animate({width:"800px"});
});$(":input:eq(1)").click(function(){$(".a").clearQueue();
});
stop()
stop(clearQueue,gotoEnd)
- clearQueue 停止,并清空后面未执行完的动画。默认为 false (true/false)
- gotoEnd 停止后,当前动画执行完毕的位置,默认为 false (true/false)
默认地,如果有列队动画,stop停止第一个列队动画,而继续执行后面的动画。
$(":button:eq(0)").click(function(){$(".a").animate({left:"500px"},1000);$(".a").animate({top:"500px"},1000);$(".a").animate({width:"500px"},1000);
});
$(":button:eq(1)").click(function(){$(".a").stop(true,true);
});
delay()
事件延迟一定的时间
delay(time)
$(":button:eq(0)").click(function(){$(".a").animate({left:"500px"});$(".a").animate({top:"500px"});$(".a").delay(1000);$(".a").animate({width:"500px"});
});
animated
之前说过的一个过滤器,可以选择正在执行动画的元素
一个永不停止的动画:
$(".a").slideToggle(function(){$(".a").slideToggle(arguments.callee);
});
使用过滤器:
$(":button").click(function(){$(":animated").css("backgroundColor","blue");
});
动画的全局属性
全局的动画属性:
- .fx.interval动画执行的帧数(num)−.fx.off 关闭动画(true/false)
$.fx.interval = 100; 设置帧数为100 ,动画变得卡顿
$.fx.off = true; 取消所有动画
jQuery动画---自定义动画animate()相关推荐
- jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果 自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
- jQuery的自定义动画
2019独角兽企业重金招聘Python工程师标准>>> 1.animate();开始动画 使用方法: $(selector).animate({params},speed,callb ...
- jquery中自定义动画效果实现
1. 语法: $(selector).animate({params},[speed,callback]);必需的 params 参数定义形成动画的 CSS 属性.可选的 speed 参数规定效果的时 ...
- jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- 【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画 简介 animate() 使用 操作多个属性 使用相对值 使用预定义的值 通过连缀或者顺序来实现列队动画 顺序写法 连缀写法 停止动画 延时动画 jQuery笔记目录 简介 j ...
- JQuary效果(自定义动画,王者荣耀效果案例)
一,自定义动画 自定义动画非常强大,通过参数的传递可以模拟以上所有动画,方法为:animate() 语法规范如下: 1,语法 animate(params,[speed],[easing],[fn]) ...
- vue自定义动画 以及animation包在vue中的使用
vue动画 自定义动画 当vue中,显示隐藏,创建移除,一个元素或者一个组件的时候,可以通过transition实现动画. 如果元素或组件离开,完成一个淡出效果: <transition nam ...
- jQuery之animate自定义动画
下面是对jQuery自定义动画的整理,希望可以帮助到有需要的小伙伴. jQuery的animate()方法可以用来自定义动画方法 语法结构如下: animate(properties,duration ...
- jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出
jquery动画效果 今天给大家介绍一下jQuery当中的几种动画效果. . animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡 ...
最新文章
- 卷积神经网络基础:(8)递归神经网络RNN
- matlab disp fprinr,matlab如何使输出结果更美观(symdisp函数——pretty函数升级版)
- mysql 5.7快速部署
- 百度金融资深产品经理降峰:互金产品如何准确触达用户
- pinpoint性能检测工具搭建(APM)
- Docker制作镜像(四)
- 未来教育计算机vb二级,2019年3月计算机二级VB考试巩固试题及答案020
- java人脸识别源码_用 Java 实现人脸识别功能(附源码)
- 如何用Carbon Copy Cloner把macOS系统旧硬盘备份到新硬盘上?
- java五子棋人机对战_java swing人机对战五子棋
- bootstrap多文件上传和单文件上传
- fastdb缩小初始生成文件
- Eclipse设置运行内存大小
- 快递取件码生成软件_一种快递柜取件码生成装置及其使用方法与流程
- 名片识别信息分类python_基于Python的智能名片识别接口调用代码实例
- r语言赋值为na_R语言中特殊值NaN、Inf 、NA、NULL
- 用久的苹果电脑是闲置回收还是维修
- 《机器学习实战》学习笔记(三):决策树
- Meet Surprise品牌饰品告诉你不同季节佩戴首饰有什么讲究
- 网站弹窗广告进行宣传推广效果怎么样