jQuery笔记（三）动画效果

约定不等于承诺〃 2022-04-13 05:29 295阅读 0赞

动画效果

1、显示与隐藏

①show() - 显示

无参版本 - 不具有动画效果

②show(speed,callback)有参版本 - 具有动画效果，两个参数都可以不写

speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fast

callback - 当动画执行完毕后执行的函数，

$("div").show(5000);

$("div").show(5000,function()\{alert('xxx');\});

③hide() - 隐藏

无参版本 - 不具有动画效果

④hide(speed,callback)有参版本 - 具有动画效果

speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fast

callback - 当动画执行完毕后执行的函数

2、滑动效果

①slideUp() - 向上滑动

可以不传递参数 - 底层具有默认时长，执行的效果依然具有动画效果

参数

speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fast

callback - 当动画执行完毕后执行的函数

$("div").slideDown(3000);

②slideDown() - 向下滑动

可以不传递参数 - 底层具有默认时长，执行的效果依然具有动画效果

参数

speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fast

callback - 当动画执行完毕后执行的函数

3、淡入淡出

①fadeIn() - 淡入

可以不传递参数 - 底层具有默认时长，执行的效果依然具有动画效果

参数

speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fast

callback - 当动画执行完毕后执行的函数

$("button:first").click(function()\{

$("div").fadeIn(3000);

$("div").fadeOut(3000);

\});

②fadeOut() - 淡出

可以不传递参数 - 底层具有默认时长，执行的效果依然具有动画效果

参数

speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fast

callback - 当动画执行完毕后执行的函数

③fadeTo() - 将当前元素从透明度一个值到另一个值

4、自定义动画

① animate(params,duration,easing,callback)

params - 设置动画样式(CSS属性)

duration - 设置动画执行时长,单位为毫秒

callback - 动画执行完毕后的函数

easing - 要使用的擦除效果的名称(不使用)

②并发效果 - 多个动画效果同时执行

animate(\{

attrName1 : attrValue1,

attrName2 : attrValue2,

...

\},time);

③排队效果 - 多个动画效果按照先后顺序执行       animate(\{attrName:attrValue\},time).animate(\{attrName:attrValue\},time).animate(\{attrName:attrValue\},time)...

④例：并发效果，一起执行

$("div").animate(\{

"width" : 50,

"height" : 50

\},3000);

排队效果 - 按照先后顺序执行

$("div").animate(\{

"width" : 50

\},3000).animate(\{

"height" : 50

\},3000).animate(\{

"left" : 200

\},3000);

切换动画

toggle() - show()+hide()  [jquery 1.9][]后不能再使用

slideToggle() - slideUp()+slideDown()

例、function move()\{

$("div").slideToggle(3000,function()\{

move();

\});

move();

5、类(似)数组操作 -  jQuery对象是数组对象

属性：length - 获取当前数组的长度(当前jQuery对象包含多少个DOM对象)

方法

get(index) - 根据角标返回DOM对象

eq(index) - 根据角标返回DOM对象

:eq()选择器的作用一致

index(obj) - 根据DOM对象返回对应角标

隐式迭代

概念

隐式迭代 - jQuery的遍历

在遍历的过程中,只关注入口和出口

var arr = \[\];// 数组就是入口

for(var i=0;i<arr.length;i++)\{

var ele = arr\[i\];// 数组的每个元素就是出口

显式迭代 - 例如for循环

在遍历的过程中,从开始到结束控制遍历的所有过程

jQuery的遍历

$().each(callback) - 对象方法

$.each(obj,callback) - 全局函数

[jquery 1.9]: http://www.baidu.com/link?url=IFMoVnVwZOKhX9c0x0cDbwOnDzzjbp8PW0OQAFxNCWmpIZ9Ve7vZle9HTbX6OdDgCQz4jLFkAUirCVOfJ9UL-K

jQuery笔记（三）动画效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery 自学笔记（三）——— 动画与特效

相关 jQuery - 效果动画

相关 jQuery 动画笔记

相关 jQuery动画效果

相关 jQuery UI实现动画效果

相关 JQuery复习之JQuery 动画效果

相关 jQuery笔记（三）动画效果

相关 jQuery动画效果——点赞动画效果

相关 jQuery效果—animate动画

相关 jQuery中的动画效果