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() 那么回调函数不会被执行