jq-05动画&自定义动画

前言：jquery为我们提供了一组网页中常用的动画效果，同时间、还提供我们了自定义动画的功能。

1.show方法

作用：让元素展示出来。

用法：

     法一：参数为数值类型，表示：执行动画时长，单位ms，eg：参数2000  即为2s。

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

     法二：参数为字符串类型，jQ预设的值，有三个：slow（相当于600ms）、normal（相当于400ms）、fast（相当于200ms）。

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

   

     法三：参数1可以是数值类型 或者是 字符串类型；参数2是动画执行完毕后的回调函数。

$( "selector" ).show("slow"，function（）{ });
$( "selector" ).show(2000，function（）{ });

     法四：无参数，作用等同于css（"display","block" ）

$( "selector" ).show(); /*注意：此时没有动画效果*/

2.hide方法

作用：让元素隐藏出来。

用法：参考show。

$("selector").hide(1000);

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

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

$("selector").hide();

3.滑入滑出动画

    3.1 slideDown滑入

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

用法：

$("selector").slideDown(speed，function（）{ });

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

    3.2 slideUp滑出

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

用法：

$("selector").slideDown(speed，function（）{ });

    

     3.3 slideToggle滑入滑出切换动画

作用：让元素以滑入滑出切换动画效果 隐藏＋显示起来。

用法：

$("selector").slideToggle(speed，function（）{ });

4.淡入淡出动画

     4.1 fadeIn淡入

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

用法：

$(selector).fadeIn(speed,function（）{  });

     4.2 fadeOut淡出

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

用法：

$(selector).fadeOut(speed,function（）{  });
$("selector").fadeOut(1000);

     

     4.3 fadeToggle淡入淡出切换动画效果

作用：调节改变匹配元素的不透明度opacity，切换元素的显示隐藏状态。

用法：

$(selector).fadeToggle(“fast”,function（）{ };

      4.4 fadeTo改变不透明度到某个值

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

注意：fadeTo和淡入淡出效果的三个方法（fadeIn，fadeOut，fadeToggle），其实还是有区别的，

因为淡入淡出只能控制元素的不透明度从完全不透明到完全透明。

而 fadeTo是可以指定元素不透明度的具体值，并且时间参数是必须的。

用法：

     参数1：时长

     参数2（ 时间参数必填）：不透明度，取值范围：0-1（ 0全透，1全不透）

$(selector).fadeTo(“fast”,0.5);
$(selector).fadeTo(1000,0.5);

 jquery提供的这几个动画效果控制的css属性包括：高度、宽度、不透明度。

5.自定义动画

stop（）

作用：停止当前正在执行的动画，取消后面队列的动画的执行后者直接执行后面动画。

意义：有时候一个元素上可能会叠加多个动画，这个时候对于这个元素来说，这些动画是有先后之分的，相当于形成了一个动画队列。该方法 stop（）正是处理队列动画的是否执行，什么时候执行的一个方法。

用法：

$(selector).stop(clearQueue，jumpToEnd);
常用：$(selector).stop（）//停止当前动画立即执行后续动画

clearQueue：true（后面的动画取消执行）;false（后续动画立即执行）

jumpToEnd：true（立即执行完毕当前动画）；false（立即停止当前动画）

都不设置时，默认均为false，即停止当前动画立即执行后续动画。

注意：如果说你的动画正在执行且还未执行完毕，那么此时你使用stop（）方法时，该动画将会立即停止，并且由于动画没有执行完成就已经停止了，所有会使得其回调函数也不会执行。

animate( )

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

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称