显示和隐藏动画

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();

hide方法

作用：让匹配元素隐藏掉
用法参考show方法。

滑入滑出动画

作用：让元素以下拉动画效果展示出来
示例：$(selector).slideDown(speed,callback);
用法参考show方法。
注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

滑出动画效果

示例：$(selector).slideUp(speed,callback);

滑入滑出切换动画效果

示例:$(selector).slideToggle(speed,callback);

淡入淡出动画

淡入动画效果

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

淡出动画效果

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

淡入淡出切换动画效果

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

改变透明度到某个值

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

总结:

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

自定义动画

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

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

停止动画

方法：stop()
参数1：表示后续动画是否要执行，true:后续动画不执行 ;false:后续动画会执行。
参数2：数表示当前动画是否执行完，true:立即执行完成当前动画 ;false:立即停止当前动画。
示例：$(selector).stop(clearQueue,jumpToEnd);
都不给，默认false；

注意：

• 当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
• 如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
• 如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。