jQuery基礎（動畫篇 animate，顯示隱藏，淡入淡出，下拉切換）

標籤：indexof   item   透明   顯示與隱藏   針對   函數   基礎   回呼函數   名稱   

1.jQuery中隱藏元素的hide方法 讓頁面上的元素不可見，一般可以通過設定css的display為none屬性。但是通過css直接修改是靜態布局，如果在代碼執行的時候，一般是通過js控制元素的style屬性，這裡jQuery提供了一個快捷的方法.hide()來達到這個效果   $elem.hide() 提供參數： .hide( options ) 當提供hide方法一個參數時，.hide()就會成為一個動畫方法。.hide()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操作  $("button:last").click(function() {            $("#a2").hide({                duration: 3000,             })        }); 2.jQuery中顯示元素的show方法  hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示 - show與hide方法是修改的display屬性，通過是visibility屬性布局需要通過css方法單獨設定- 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css(‘display‘, ‘block !important‘)重寫樣式- 如果讓show與hide成為一個動畫，那麼預設執行動畫會改變元素的高度，高度，透明度 3.jQuery中顯示與隱藏切換toggle方法 基本的操作：toggle();   這是最基本的操作，處理元素顯示或者隱藏，因為不帶參數，所以沒有動畫。通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。 - 如果元素是最初顯示，它會被隱藏- 如果隱藏的，它會顯示出來 display屬性將被儲存並且需要的時候可以恢複。如果一個元素的display值為inline，然後是隱藏和顯示，這個元素將再次顯示inline 提供參數：.toggle( [duration ] [, complete ] ) 同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法   $("button:last").click(function() {         $(".right").toggle(3000)     }); 4.jQuery中下拉動畫slideDown  .slideDown()：用滑動動畫顯示一個匹配元素 .slideDown()方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式 常見的操作，提供一個動畫是時間，然後傳遞一個回調，用於知道動畫是什麼時候結束 .slideDown( [duration ] [, complete ] ) 期間（duration）是以毫秒為單位的，數值越大，動畫越慢，不是越快。字串 ‘fast‘ 和 ‘slow‘ 分別代表200和600毫秒的延時。如果提供任何其他字串，或者這個duration參數被省略，那麼預設使用400 毫秒的延時。 具體使用： $("ele").slideDown(1000, function() {
    //等待動畫執行1秒後,執行別的動作....
});  注意事項： - 下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設定display:none- 如 果提供回呼函數參數，callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回呼函數不設定任何參數，但是 this會設成將要執行動畫的那個DOM元素，如果多個元素一起做動畫效果，那麼要非常注意，回呼函數會在每一個元素執行完動畫後都執行一次，而不是這組 動畫整體才執行一次     $("button:last").click(function() {             $("#a2").slideDown(3000,function(){                 alert(‘動畫執行結束‘)             })         });  5.jQuery中上捲動畫slideUp 最簡單的使用：不帶參數   $("elem").slideUp();   這個使用的含義就是：找到元素的高度，然後採用一個下滑動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設定為none。這樣就能確保這個元素不會影響頁面配置了 帶參數： .slideUp( [duration ] [, easing ] [, complete ] ) 同樣可以提供一個時間，然後可以使用一種過渡使用哪種easing 函式，jQuery預設就2種，可以通過下載外掛程式支援。最後一個動畫結束的回調方法。 因為動畫是非同步，所以要在動畫之後執行某些操作就必須要寫到回呼函數裡面，這裡要特別注意    $("button:last").click(function() {             $("#a2").slideUp(3000,function(){                 alert(‘動畫執行結束‘)             })         }); 6.jQuery中上卷下拉切換slideToggle  jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素 基本的操作：slideToggle(); 這是最基本的操作，擷取元素的高度，使這個元素的高度發生改變，從而讓元素裡的內容往下或往上滑。 提供參數：.slideToggle( [duration ] ,[ complete ] ) 同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然後出發回呼函數 同時也提供了時間的快速定義，字串 ‘fast‘ 和 ‘slow‘ 分別代表200和600毫秒的延時   注意： - display屬性值儲存在jQuery的資料緩衝中，所以display可以方便以後可以恢複到其初始值- 當一個隱藏動畫後，高度值達到0的時候，display 樣式屬性被設定為none，以確保該元素不再影響頁面配置     $("button").click(function() {             $("#a1").slideToggle(3000)         });  7.jQuery中淡齣動畫fadeOut  設定元素透明度為0，可以讓元素不可見，透明度的參數是0~1之間的值，通過改變這個值可以讓元素有一個透明度的效果。常見的淡入淡齣動畫正是這樣的原理。 fadeOut()函數用於隱藏所有匹配的元素，並帶有淡出的過渡動畫效果 所謂"淡出"隱藏的，元素是隱藏狀態不對作任何改變，元素是可見的，則將其隱藏。  .fadeOut( [duration ], [ complete ] )
 通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回呼函數。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。 字串 ‘fast‘ 和 ‘slow‘ 分別代表200和600毫秒的延時。如果提供任何其他字串，或者這個duration參數被省略，那麼預設使用400毫秒的延時   $("p").fadeOut();    $("p").fadeOut({                 duration: 1000             });  $("p").fadeOut(2000, function() {                 alert("隱藏完畢!");             }); 8.jQuery中淡入動畫fadeIn  fadeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上兩者都是一致的，只是結果相反   .fadeIn( [duration ], [ complete ] ) - duration：指定過渡動畫運行多長時間(毫秒數)，預設值為400。該參數也可以為字串"fast"(=200)或"slow"(=600)。- 元素顯示完畢後需要執行的函數。函數內的this指向當前DOM元素。 fadeIn()函數用於顯示所有匹配的元素，並帶有淡入的過渡動畫效果。  注意： - 淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100%- 如果元素本身是可見的，不對其作任何改變。如果元素是隱藏的，則使其可見 9.jQuery中淡入淡出切換fadeToggle fadeToggle()函數用於切換所有匹配的元素，並帶有淡入/淡出的過渡動畫效果。之前也學過toggle、slideToggle 也是類似的處理方式 fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)。  常用文法：.fadeToggle( [duration ] ,[ complete ] ) 可選的 duration 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數是 fadeToggle完成後所執行的函數名稱。 fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。 （和上面的方式一樣）  10.jQuery中淡入效果fadeTo  淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個共同的特點，變化的區間要麼是0，要麼是1   fadeIn：淡入效果，內容顯示，opacity是0到1
fadeOut：淡出效果，內容隱藏，opacity是1到0
  如果要讓元素保持動畫效果，執行opacity = 0.5的效果時，要如何處理？ 如果不考慮CSS3，我們用JS實現的話，基本就是通過定時器，在設定的時間內一點點的修改opacity的值，最終為0.5，原理雖說簡單，但是總不如一鍵設定這麼舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位  文法   .fadeTo( duration, opacity ,callback) 必需的 duration參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。可選的 callback 參數是該函數完成後所執行的函數名稱。  $("p").fadeTo("slow", 0.5);   $("p").fadeTo(1000, 0.2);        $("p").fadeTo(1000, 0.9, function() {  alert(‘完成‘) });  11.jQuery中toggle與slideToggle以及fadeToggle的比較  操作元素的顯示和隱藏可以有幾種方法。 例如： - 改變樣式display為none- 設定位置高度為0- 設定透明度為0 都能達到這個目的，並且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法  toggle、sildeToggle以及fadeToggle的區別： - toggle：切換顯示與隱藏效果- sildeToggle：切換上下拉卷滾效果- fadeToggle：切換淡入淡出效果 當然細節上還是有更多的不同點:   toggle與slideToggle細節區別： - toggle：動態效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見度- slideToggle：動態效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見度  fadeToggle方法 - fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。- 元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。- 元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。- 注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局） 12.jQuery中動畫animate(上)  有些複雜的動畫通過之前學到的幾個動畫函數是不能夠實現，這時候就需要強大的animate方法了 操作一個元素執行3秒的淡入動畫，對比一下2組動畫設定的區別  文法： .animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options ) .animate()方法允許我們在任意的數值的CSS屬性上建立動畫。2種文法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性索引值對。這組屬性和用於設定.css()方法的屬性索引值對類似，除了屬性範圍做了更多限制。第二個參數開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了  參數分解：properties：一個或多個css屬性的索引值對所構成的Object對象。要特別注意所有用於動畫的屬性必須是數位，除非另有說明；這些屬性如果不是數位將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不可以，因為參數是red或者GBG這樣的值，非常用外掛程式，否則正常情況下是不能只用動畫效果的。注意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設定，而非 CSS 名稱（比如 "font-size"）。 特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用  .animate({
    left: 50,
    width: ‘50px‘ 
    opacity: ‘show‘, 
    fontSize: "10em",
}, 500);
  除了定義數值，每個屬效能使用‘show‘, ‘hide‘, 和 ‘toggle‘。這些捷徑允許定製隱藏和顯示動畫用來控制元素的顯示或隱藏 .animate({
    width: "toggle"
});

 如果提供一個以+= 或 -=開始的值，那麼目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的 .animate({
    left: ‘+=50px‘
}, "slow");

  duration時間 動畫執行的時間，期間是以毫秒為單位的；值越大表示動畫執行的越慢，不是越快。還可以提供‘fast‘ 和 ‘slow‘字串，分別表示期間為200 和 600毫秒。  easing動畫運動的演算法 jQuery庫中預設調用 swing。如果需要其他的動畫演算法，請尋找相關的外掛程式  complete回調 動畫完成時執行的函數，這個可以保證當前動畫確定完成後發會觸發  if (v == "1") {            // 數值的單位預設是px            $aaron.animate({                 width  :300,                 height :300             });        } else if (v == "2") {            // 在現有高度的基礎上增加100px            $aaron.animate({                  width  : "+=100px",                  height : "+=100px"             });        } else if (v == "3") {            $aaron.animate({                 fontSize: "5em"             }, 2000, function() {                 alert("動畫 fontSize執行完畢!");             });        } e lse if (v == "4") {             //通過toggle參數切換高度             $aaron.animate({                 width: "toggle"             });        } 13.jQuery中動畫animate(下) animate在執行動畫中，如果需要觀察動畫的一些執行情況，或者在動畫進行中的某一時刻進行一些其他處理，我們可以通過animate提供的第二種設定文法，傳遞一個對象參數，可以拿到動畫執行狀態一些通知  .animate( properties, options ) options參數 - duration - 設定動畫執行的時間- easing - 規定要使用的 easing 函數，過渡使用哪種easing 函式- step：規定每個動畫的每一步完成之後要執行的函數- progress：每一次動畫調用的時候會執行這個回調，就是一個進度的概念- complete：動畫完成回調 其中最關鍵的一點就是： 如果多個元素執行動畫，回調將在每個匹配的元素上執行一次，不是作為整個動畫執行一次 列出常用的方式： $(‘#elem‘).animate({
    width: ‘toggle‘, 
    height: ‘toggle‘
  }, {
    duration: 5000,
    specialEasing: {
      width: ‘linear‘,
      height: ‘easeOutBounce‘
    },
    complete: function() {
      $(this).after(‘<div>Animation complete.</div>‘);
    }
  });

 14.jQuery中停止動畫stop  動畫在執行過程中是允許被暫停，當一個元素調用.stop()方法，當前正在啟動並執行動畫（如果有的話）立即停止 文法：   .stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
 stop還有幾個可選的參數，簡單來說可以這3種情況 - .stop(); 停止當前動畫，點擊在暫停處繼續開始- .stop(true); 如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那麼在隊列中的動畫其餘被刪除並永遠不會運行- .stop(true,true); 當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值 簡單的說：參考下面代碼、 $("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)

  - stop()：只會停止第一個動畫，第二個第三個繼續 - stop(true)：停止第一個、第二個和第三個動畫 - stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態 15.jQuery中each方法的應用 jQuery中有個很重要的核心方法each，大部分jQuery方法在內部都會調用each，其主要的原因的就是jQuery的執行個體是一個元素合集 如下：找到所有的div，並且都設定樣式，css只是一個方法，所以內部會調用each處理這個div的合集，給每個div都設定style屬性 $(‘div‘).css(...)

 jQuery的大部分方法都是針元素合集的操作，所以jQuery會提供$(selector).each()來遍曆jQuery對象 .each只是處理jQuery對象的方法，jQuery還提供了一個通用的jQuery.each方法，用來處理對象和數組的遍曆 文法  jQuery.each(array, callback )
jQuery.each( object, callback )
 第一個參數傳遞的就是一個對象或者數組，第二個是回呼函數  $.each(["Aaron", "慕課網"], function(index, value) {
  //index是索引,也就是數組的索引
  //value就是數組中的值了
}); each就是for迴圈方法的一個封裝，內部就是通過for遍曆數組與對象，通過回呼函數返回內部迭代的一些參數，第一個參數是當前迭代成員在對象或數組中的索引值(從0開始計數)，第二個參數是當前迭代成員(與this的引用相同 jQuery.each()函數還會根據每次調用函數callback的傳回值來決定後續動作。如果傳回值為false，則停止迴圈(相當於普通迴圈中的break)；如果返回其他任何值，均表示繼續執行下一個迴圈。   $.each(["Aaron", "慕課網"], function(index, value) {
    return false; //停止迭代
}); jQuery方法可以很方便的遍曆一個資料，不需要考慮這個資料是對象還是數組   // 遍曆數組元素             $.each([‘Aaron‘, ‘慕課網‘], function(i, item) {                 $aaron.append("索引=" + i + "; 元素=" + item);             });     $.each({                 name: "張三",                 age: 18    }, function(property, value) {                 $aaron.append("屬性名稱=" + property + "; 屬性值=" + value);    }); 16.jQuery中尋找數組中的索引inArray 在PHP有in_array()判斷某個元素是否存在數組中，JavaScript卻沒有，但是jQuery封裝了inArray()函數判斷元素是否存在數組中。注意了：在ECMAScript5已經有資料的indexOf方法支援了，但是jQuery保持了版本向下相容，所以封裝了一個inArray方法  jQuery.inArray()函數用於在數組中搜尋指定的值，並返回其索引值。如果數組中不存在該值，則返回 -1。 文法：   jQuery.inArray( value, array ,[ fromIndex ] )
 用法非常簡單，傳遞一個檢測的目標值，然後傳遞原始的數組，可以通過fromIndex規定尋找的起始值，預設數組是0開始 例如：在數組中尋找值是5的索引  $.inArray(5,[1,2,3,4,5,6,7]) //返回對應的索引：4

 注意： 如果要判斷數組中是否存在指定值，你需要通過該函數的傳回值不等於(或大於)-1來進行判斷   if (v == "1") {               var index = $.inArray(‘Aaron‘,[‘test‘,‘Aaron‘, ‘array‘,‘慕課網‘]);               $aaron.text(‘Aaron的索引是: ‘+ index)           } else if (v == "2") {               //指定索引開始的位置             var index = $.inArray(‘a‘,[‘a‘,‘b‘,‘c‘,‘d‘,‘a‘,‘c‘],2);               $aaron.text(‘a的索引是: ‘+ index)         } 17.jQuery中去空格神器trim方法 頁面中，通過input可以擷取使用者的輸入值，例如常見的登入資訊的提交處理。使用者的輸入不一定是標準的，輸入一段密碼：‘  1123456  "，注意了： 密碼的前後會留空，這可能是使用者的無心的行為，但是密碼確實又沒錯，針對這樣的行為，開發人員應該要判斷輸入值的前後是否有空白符、分行符號、定位字元這樣明顯的無意義的輸入值。   jQuery.trim()函數用於去除字串兩端的空白字元 這個函數很簡單，沒有多餘的參數用法 需要注意：  - 移除字串開始和結尾處的所有分行符號，空格(包括連續的空格)和定位字元（tab） - 如果這些空白字元在字串中間時，它們將被保留，不會被移除    alert("值的長度：" + $.trim($("#results2").val()).length) 18.jQuery中DOM元素的擷取get方法 jQuery是一個合集對象，如果需要單獨操作合集中的的某一個元素，可以通過.get()方法擷取到 以下有3個a元素結構： <a>1</a>
<a>2</a>
<a>3</a>

  通過jQuery擷取所有的a元素合集$("a")，如果想進一步在合集中找到第二2個dom元素單獨處理，可以通過get方法 文法： .get( [index ] )

 注意2點  - get方法是擷取的dom對象，也就是通過document.getElementById擷取的對象 - get方法是從0開始索引 所以第二個a元素的尋找： $(a).get(1) 負索引值參數 get方法還可以從後往前索引，傳遞一個負索引值，注意的負值的索引起始值是-1 同樣是找到第二元素，可以傳遞 $(a).get(-2)   $aaron.get(1).style.color = "blue"  $aaron.get(-1).style.color = "#8A2BE2" 19.jQuery中DOM元素的擷取index方法  get方法是通過已知的索引在合集中找到對應的元素。如果反過來，已知元素如何在合集中找到對應的索引呢？  .index()方法，從匹配的元素中搜尋給定元素的索引值，從0開始計數。 文法：參數接受一個jQuery或者dom對象作為尋找的條件  .index()
.index( selector )
.index( element )
 - 如果不傳遞任何參數給 .index() 方法，則傳回值就是jQuery對象中第一個元素相對於它同輩元素的位置- 如果在一組元素上調用 .index() ，並且參數是一個DOM元素或jQuery對象， .index() 傳回值就是傳入的元素相對於原先集合的位置- 如果參數是一個選取器， .index() 傳回值就是原先元素相對於選取器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1 簡單來說： <ul>
    <a></a>
    <li id="test1">1</li>
    <li id="test2">2</li>
    <li id="test3">3</li>
</ul>

 $("li").index() 沒有傳遞參數，反正的結果是1，它的意思是返回同輩的排列循序，第一個li之前有a元素,同輩元素是a開始為0，所以li的開始索引是1 如果要快速找到第二個li在列表中的索引,可以通過如下2種方式處理   $("li").index(document.getElementById("test2")) //結果：1
$("li").index($("#test2"))  //結果:1        

jQuery基礎（動畫篇 animate，顯示隱藏，淡入淡出，下拉切換）