動畫效果

1、顯示與隱藏

   ①show() - 顯示

       無參版本 - 不具有動畫效果

   ②show(speed,callback)有參版本 - 具有動畫效果，兩個引數都可以不寫

       speed - 設定動畫執行的時長,單位為毫秒，三個預定義值 - slow|normal|fast

   callback - 當動畫執行完畢後執行的函式，

           $("div").show(5000);

           $("div").show(5000,function(){alert('xxx');});

   ③hide() - 隱藏

         無參版本 - 不具有動畫效果

   ④hide(speed,callback)有參版本 - 具有動畫效果

       speed - 設定動畫執行的時長,單位為毫秒，三個預定義值 - slow|normal|fast

   callback - 當動畫執行完畢後執行的函式

 2、滑動效果

   ①slideUp() - 向上滑動

       可以不傳遞引數 - 底層具有預設時長，執行的效果依然具有動畫效果

       引數

           speed - 設定動畫執行的時長,單位為毫秒，三個預定義值 - slow|normal|fast

       callback - 當動畫執行完畢後執行的函式

       $("div").slideDown(3000);

   ②slideDown() - 向下滑動

       可以不傳遞引數 - 底層具有預設時長，執行的效果依然具有動畫效果

         引數

           speed - 設定動畫執行的時長,單位為毫秒，三個預定義值 - slow|normal|fast

       callback - 當動畫執行完畢後執行的函式

3、淡入淡出

   ①fadeIn() - 淡入

         可以不傳遞引數 - 底層具有預設時長，執行的效果依然具有動畫效果

         引數

           speed - 設定動畫執行的時長,單位為毫秒，三個預定義值 - slow|normal|fast

       callback - 當動畫執行完畢後執行的函式

        $("button:first").click(function(){

    $("div").fadeIn(3000);

    $("div").fadeOut(3000);

     });

②fadeOut() - 淡出

         可以不傳遞引數 - 底層具有預設時長，執行的效果依然具有動畫效果

         引數

           speed - 設定動畫執行的時長,單位為毫秒，三個預定義值 - slow|normal|fast

       callback - 當動畫執行完畢後執行的函式

  ③fadeTo() - 將當前元素從透明度一個值到另一個值

 

4、自定義動畫

① animate(params,duration,easing,callback)

         params - 設定動畫樣式(CSS屬性)

         duration - 設定動畫執行時長,單位為毫秒

         callback - 動畫執行完畢後的函式

         easing - 要使用的擦除效果的名稱(不使用)

    

  ②併發效果 - 多個動畫效果同時執行

       animate({

          attrName1 : attrValue1,

      attrName2 : attrValue2,

        ...

       },time);

 

③排隊效果 - 多個動畫效果按照先後順序執行       animate({attrName:attrValue},time).animate({attrName:attrValue},time).animate({attrName:attrValue},time)...

 

 

④例：併發效果，一起執行

$("div").animate({

"width" : 50,

"height" : 50

},3000);

 

排隊效果 - 按照先後順序執行

$("div").animate({

"width" : 50

},3000).animate({

"height" : 50

},3000).animate({

"left" : 200

},3000);

 

     切換動畫  

       toggle() - show()+hide()  jquery 1.9後不能再使用

       slideToggle() - slideUp()+slideDown()

例、function move(){

$("div").slideToggle(3000,function(){

move();

});

  }

  move();

  

 

5、類(似)陣列操作 -  jQuery物件是陣列物件

     屬性：length - 獲取當前陣列的長度(當前jQuery物件包含多少個DOM物件)

     方法

       get(index) - 根據角標返回DOM物件

       eq(index) - 根據角標返回DOM物件

       :eq()選擇器的作用一致

       index(obj) - 根據DOM物件返回對應角標

     隱式迭代

       概念

         隱式迭代 - jQuery的遍歷

           在遍歷的過程中,只關注入口和出口

 var arr = [];// 陣列就是入口

 for(var i=0;i<arr.length;i++){

    var ele = arr[i];// 陣列的每個元素就是出口

 }

         顯式迭代 - 例如for迴圈

           在遍歷的過程中,從開始到結束控制遍歷的所有過程

       jQuery的遍歷

         $().each(callback) - 物件方法

         $.each(obj,callback) - 全域性函式