jQuery 动画

说明

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

常用的方法：
显示：show()  slideDown()  fadeIn()
隐藏：hide()  slideUp()  fadeOut()
其他：slideToggle() stop()

1、隐藏和显示

• 显示方法 show ( )

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

 用法一：
 $(selector).show(2000);
// 参数为数值类型，表示：执行动画时长
// 单位为：毫秒（ms），参数2000表示动画执行时长为2000毫秒，即2秒钟 

 用法二：
 $(selector).show("slow"); 
$(selector).show("normal");
 $(selector).show("fast");
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
// 跟用法一的对应关系为：
// slow：600ms
// normal：400ms
// fast：200ms 

 用法三：
 $(selector).show(2000, function() {
   //回调函数执行代码
 });
// 参数一：可以是数值类型或者字符串类型
// 参数二：动画执行完后立即执行的回调函数

 用法四：
 $(selector).show();
// 不带参数，作用等同于 css("display", "block")
// 注意：此时没有动画效果 

/注意/：
jQuery预设的三组动画效果的语法几乎一致：
参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。
第一个参数可以是：指定字符或者毫秒数

• 隐藏方法hide ( )

/作用/：让匹配元素隐藏掉（用法参考show方法）
$(selector).hide(1000); 
$(selector).hide("slow");
$(selector).hide(1000, function(){});
$(selector).hide();

2、滑入/滑出 动画

• 滑入动画效果 slideDown()

/作用/：让元素以下拉动画效果展示出来
$(selector).slideDown(speed, callback);
$(selector).slideDown();

• 滑出动画效果 slideUp()

/作用/：让元素以上拉动画效果隐藏起来
$(selector).slideUp(speed, callback);

• 滑入滑出切换动画效果 slideToggle()

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

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

3、淡入/淡出 动画

• 淡入fadeIn ( )

/作用/：让元素以淡淡的进入视线的方式展示出来
$(selector).fadeIn(speed, callback);

• 淡出fadeOut ( )

/作用/：让元素以渐渐消失的方式隐藏起来
$(selector).fadeOut(1000);

• 淡入淡出切换fadeToggle ( )

/作用/：通过改变不透明度，切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast', callback);

• 改变不透明到某个值fadeTo ( )

/作用/：改变匹配元素的不透明度 
$(selector).fadeTo(1000, .5); //  0全透，1全不透
// 用法有别于其他动画效果
// 第一个参数表示：时长
// 第二个参数表示：不透明度值，取值范围：0-1
/注意/：第一个参数为0，此时作用相当于：.css("opacity", .5);
$(selector).fadeTo(0, .5);
/*与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到 完全透明；
而fadeTo可以指定元素不透明度的具体值。*/

4、自定义动画

• jQuery内置动画的规律:

jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。{height:400px; width:300px; opacity:.4;}
这三个CSS属性的共性是：
1 样式属性的值只有一个
2 这个值是数值（去掉单位后）。

注意：所有能够执行动画的属性必须只有一个数字类型的值。
比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font

• 自定义动画 animate()

作用：执行一组CSS属性的自定义动画
// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后立即执行的回调函数（可选）
$(selector).animate({params}, speed, callback);

5、停止动画 stop（）

$(selector).stop(clearQueue, jumpToEnd);
/作用/：停止当前正在执行的动画
// 第一个参数表示是否清空所有的后续动画
// 第二个参数表示是否立即执行完当前正在执行的动画

解释

stop(true, true)   后续动画不会执行，当前动画立即跳到结束的位置
stop(true, false)  后续动画不会执行，当前动画立即停止
stop(false, true)  立即执行后续动画，当前动画立即跳到结束的位置
stop(false, false) 立即执行后续动画，当前动画立即停止

注意：如果元素动画还没有执行完，调用sotp() 那么回调函数不会被执行