jQuery动画操作

1.1 知识点

1．show()通过display：block/none来实现隐藏和显示

2．show(毫秒值):通过控制宽高透明度和display来实现

3．show(“slow/normer/fast”):

a) slow慢：600ms，

b) normer 正常：400ms，

c)   fast快：200毫秒，

4．show(毫秒值，回调函数)：执行完毕执行回调函数

5．hide():隐藏方法的参数与show()方法的一样

6．slideDown():滑入方法的参数与show()方法一样

7．slideUp():滑出方法的参数与slideDown()方法一样

8．slidToggle()：滑入滑出切换的参数与slideDown()方法一样

9．fadeIn():淡入方法的参数与slideDown()方法一样

10．fadeOut():淡出方法的参数与fadeIn()方法一样

11．fadeTo(毫秒值,透明度):透明度：0~1，更改透明度到设定透明度

12．对象.animate(json,毫秒值,会滴函数)

13．animate不支持背景色

14．stop()停止动画：默认两个都是false

15．stop(参数1,参数2):

a) 第一个参数表示后续动画是否要执行

i. true后续动画不执行

ii. false后续动画执行

b) 第二个参数表示当前动画是否要执行完毕

i. ture立即执行完当前的动画

ii. false立即停止当前的动画

16．123

1.2 jQuery动画是什么？

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

1.2.1 隐藏显示动画

1 show方法

作用：让匹配的元素展示出来

 

// 用法一：

// 参数为数值类型，表示：执行动画时长

/* 单位为：毫秒（ms），参数2000即2秒钟显示完毕 */

$(selector).show(2000);

 

// 用法二：

// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast

/* 跟用法一的对应关系为： */

/* slow：600ms、normal：400ms、fast：200ms */

$(selector).show(“slow”);

 

// 用法三：

// 参数一可以是数值类型或者字符串类型

// 参数二表示：动画执行完后立即执行的回调函数

$(selector).show(2000, function() {});

 

// 用法四：

// 不带参数，作用等同于 css(“display”, ”block”)

/* 注意：此时没有动画效果 */

$(selector).show();

 

注意：

jQuery预设的三组动画效果的语法几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。

第一个参数是：可以是指定字符或者毫秒数

 

2 hide方法

作用：让匹配元素隐藏掉

用法参考show方法

$(selector).hide(1000); // 1000表示什么？

$(selector).hide(“slow”);

$(selector).hide(1000, function(){});

$(selector).hide();

 

1.2.2 滑入滑出动画

1滑入动画效果（联想：生活中的卷帘门）

作用：让元素以下拉动画效果展示出来

$(selector).slideDown(speed,callback);

 

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

$(selector).slideDown();

 

2 滑出动画效果

作用：让元素以上拉动画效果隐藏起来

$(selector).slideUp(speed,callback);

 

3滑入滑出切换动画效果

$(selector).slideToggle(speed,callback);

参数等同与1.5.1 隐藏和显示

1.2.3 淡入淡出动画

1 淡入动画效果

作用：让元素以淡淡的进入视线的方式展示出来

$(selector).fadeIn(speed, callback);

2 淡出动画效果

作用：让元素以渐渐消失的方式隐藏起来

$(selector).fadeOut(1000);

3淡入淡出切换动画效果

作用：通过改变透明度，切换匹配元素的显示或隐藏状态

$(selector).fadeToggle('fast',function(){});

参数等同与1.5.1 隐藏和显示

 

4改变透明度到某个值

与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

作用：调节匹配元素的不透明度

// 用法有别于其他动画效果

// 第一个参数表示：时长

// 第二个参数表示：不透明度值，取值范围：0-1

$(selector).fadeTo(1000, .5); //  0全透，1全不透

 

// 第一个参数为0，此时作用相当于：.css(“opacity”, .5);

$(selector).fadeTo(0, .5);

 

jQuery提供的动画使用方法总结：

 

 

 

有规律的体现：

jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。{height:400px; width:300px; opacity:.4;}

这三个CSS属性的共性是：属性值只有一个，并且这个值是数值（去掉单位后）。

 

1.2.4 自定义动画

注意：所有能够执行动画的属性必须只有一个数字类型的值。

比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font

 

动画支持的属性：

http://www.w3school.com.cn/jquery/effect_animate.asp

 

作用：执行一组CSS属性的自定义动画

// 第一个参数表示：要执行动画的CSS属性（必选）

// 第二个参数表示：执行动画时长（可选）

// 第三个参数表示：动画执行完后立即执行的回调函数（可选）

$(selector).animate({params},speed,callback);

 

1.2.5 停止动画

stop()

作用：停止当前正在执行的动画

为什么要停止动画？

如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站）

动画队列里面的动画不会执行，直到第一个动画执行完成。

// 第一个参数表示后续动画是否要执行

（true:后续动画不执行  ;false:后续动画会执行）

// 第二个参数表示当前动画是否执行完

（true:立即执行完成当前动画  ;false:立即停止当前动画）

$(selector).stop(clearQueue,jumpToEnd);

都不给，默认false；

解释：

当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。

如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。

 

注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。

 

常用方式：

$(selector).stop();