jQueryDOM操作--动画--show()|hide()、slideDown()|slideUp()、fadeIn()|fadeOut()、stop()、animate()

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

1.显示的方法show()：作用--让匹配的元素展示出来；隐藏的方法hide()

①参数为数值类型，表示执行动画的毫秒数

$(selector).show(2000);

②参数为字符串类型，jQuery的自带预设值（slow--600ms、normal--400ms、fast--200ms）

$(selector).show("slow");

③第二个参数为回调函数，动画执行完成之后执行的函数

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

④不带任何参数，作用等同于设置display:none和display:block

$(selector).show();

2.滑入slideDown()和滑出slideUp()效果

参数和用法和上面一致，不再过多重复，但是有一个slideToggle()方法，参数一致。

注意：省略的参数或者传入的参数不合法，就会使用默认值（400ms），jQuery动画都适用。

3.淡入（fadeIn()）效果和淡出（fadeOut()）,以及自动切换（fadeToggle()）

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

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

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

$(selector).fadeTo(1000, .5);    //fadeTo可以指定元素不透明度的具体值。

三种方法小结：

①

 ②jQuery提供的这几个动画控制的是宽度，高度，透明度；共同点：样式属性的值只有一个，这个值是数值（去掉单位）。 

③所有能够执行动画的属性必须中有一个数字类型的值。 

4.自定义动画 ：执行一组css属性的自定义动画

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

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

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

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

5.停止动画stop()：停止当前正在执行的动画

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

// 第一个参数表示是否清空所有的后续动画

// 第二个参数表示是否立即执行完当前正在执行的动画


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

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