亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

toggle、sildeToggle以及fadeToggle的區別：

• toggle：切換顯示與隱藏效果

• sildeToggle：切換上下拉卷滾效果

• fadeToggle：切換淡入淡出效果

toggle與slideToggle細節區別：

• toggle：動態效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性

• slideToggle：動態效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性

fadeToggle方法

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。

• 元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。

• 元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。

• 注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局）

display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到初始值

當一個隱藏動畫后，高度值達到0的時候，display樣式屬性被設置為none，以確保該元素不再影響頁面布局

因為動畫是異步的，所以要在動畫之后執行某些操作就必須要寫到回調函數里面??！

顯示與隱藏切換toggle方法：show與hide的相互切換的一個快捷方法

<table><colgroup><col /><col /></colgroup><tbody><tr class="firstRow"><td>方法</td><td>描述</td></tr><tr><td>$elem.hide()</td><td>動態隱藏</td></tr><tr><td>$('elem').hide(3000).show(3000)</td><td>讓元素執行3秒的隱藏動畫，然后執行3秒的顯示動畫</td></tr><tr><td>toggle();</td><td>如果元素是最初顯示，它會被隱藏<br />如果隱藏的，它會顯示出來</td></tr><tr><td>.toggle(?[duration?]?[,?complete?]?)</td><td>同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法</td></tr><tr><td>.toggle(display)</td><td>直接提供一個參數，指定要改變的元素的最終效果</td></tr><tr><td>.slideDown(?[duration?]?[,?complete?]?)</td><td>用滑動動畫顯示一個匹配元素</td></tr><tr><td>$("elem").slideUp();</td><td>找到元素的高度，然后采用一個下滑動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display?樣式屬性被設置為none。這樣就能確保這個元素不會影響頁面布局了</td></tr><tr><td>.slideUp(?[duration?]?[,?easing?]?[,?complete?]?)</td><td>因為動畫是異步的，所以要在動畫之后執行某些操作就必須要寫到回調函數里面，這里要特別注意</td></tr><tr><td>slideToggle();</td><td>這是最基本的操作，獲取元素的高度，使這個元素的高度發生改變，從而讓元素里的內容往下或往上滑。</td></tr><tr><td>.slideToggle(?[duration?]?,[?complete?]?)</td><td>同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然后出發回調函數</td></tr><tr><td>fadeOut()</td><td>用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果</td></tr><tr><td>.fadeIn(?[duration?],?[?complete?]?)</td><td>duration：指定過渡動畫運行多長時間(毫秒數)，默認值為400。該參數也可以為字符串"fast"(=200)或"slow"(=600)，元素顯示完畢后需要執行的函數。函數內的this指向當前DOM元素。</td></tr><tr><td>.fadeToggle(?[duration?]?,[?complete?]?)</td><td>fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)。</td></tr><tr><td>.fadeTo(?duration,?opacity?,callback)</td><td>必需的?duration參數規定效果的時長。它可以取以下值："slow"、"fast"?或毫秒。fadeTo()?方法中必需的?opacity?參數將淡入淡出效果設置為給定的不透明度（值介于?0?與?1?之間）。可選的?callback?參數是該函數完成后所執行的函數名稱。</td></tr><tr><td>.animate(?properties?,[?duration?],?[?easing?],?[?complete?]?)<br /></td><td>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"）。</td></tr><tr><td>duration時間：動畫執行的時間，持續時間是以毫秒為單位的；值越大表示動畫執行的越慢，不是越快。還可以提供'fast'?和?'slow'字符串，分別表示持續時間為200?和?600毫秒；easing動畫運動的算法：jQuery庫中默認調用?swing。如果需要其他的動畫算法，請查找相關的插件；complete回調：<br />動畫完成時執行的函數，這個可以保證當前動畫確定完成后發會觸發</td><td><br /></td></tr><tr><td>.animate(?properties,?options?)</td><td>duration?-?設置動畫執行的時間<br />easing?-?規定要使用的?easing?函數，過渡使用哪種緩動函數<br />step：規定每個動畫的每一步完成之后要執行的函數<br />progress：每一次動畫調用的時候會執行這個回調，就是一個進度的概念<br />complete：動畫完成回調??????????????????????????????????????????????????????????????????????????????????????????????如果多個元素執行動畫，回調將在每個匹配的元素上執行一次，不是作為整個動畫執行一次</td></tr><tr><td>.stop(?[clearQueue?],?[?jumpToEnd?]?)<br />.stop(?[queue?],?[?clearQueue?]?,[?jumpToEnd?]?)</td><td>.stop();?停止當前動畫，點擊在暫停處繼續開始<br />.stop(true);?如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那么在隊列中的動畫其余被刪除并永遠不會運行<br />.stop(true,true);?當前動畫將停止，但該元素上的?CSS?屬性會被立刻修改成動畫的目標值</td></tr><tr><td>jQuery.each(array,?callback?)<br />jQuery.each(?object,?callback?)</td><td>each就是for循環方法的一個包裝，內部就是通過for遍歷數組與對象，通過回調函數返回內部迭代的一些參數，第一個參數是當前迭代成員在對象或數組中的索引值(從0開始計數)，第二個參數是當前迭代成員(與this的引用相同</td></tr><tr><td>jQuery.inArray(?value,?array?,[?fromIndex?]?)</td><td>傳遞一個檢測的目標值，然后傳遞原始的數組，可以通過fromIndex規定查找的起始值，默認數組是0開始，如果要判斷數組中是否存在指定值，你需要通過該函數的返回值不等于(或大于)-1來進行判斷</td></tr><tr><td>jQuery.trim()</td><td>用于去除字符串兩端的空白字符</td></tr><tr><td>.get(?[index?]?)</td><td>注意2點<br />get方法是獲取的dom對象，也就是通過document.getElementById獲取的對象<br />get方法是從0開始索引<br />所以第二個a元素的查找：?$(a).get(1)<br />負索引值參數<br />get方法還可以從后往前索引，傳遞一個負索引值，注意的負值的索引起始值是-1<br />同樣是找到第二元素，可以傳遞?$(a).get(-2)?</td></tr><tr><td>.index()<br />.index(?selector?)<br />.index(?element?)</td><td>如果不傳遞任何參數給?.index()?方法，則返回值就是jQuery對象中第一個元素相對于它同輩元素的位置<br />如果在一組元素上調用?.index()?，并且參數是一個DOM元素或jQuery對象，?.index()?返回值就是傳入的元素相對于原先集合的位置<br />如果參數是一個選擇器，?.index()?返回值就是原先元素相對于選擇器匹配元素的位置。如果找不到匹配的元素，則?.index()?返回?-1</td></tr></tbody></table><p><br /></p>

toggle、sildeToggle以及fadeToggle的區別：

• toggle：切換顯示與隱藏效果

• sildeToggle：切換上下拉卷滾效果

• fadeToggle：切換淡入淡出效果

當然細節上還是有更多的不同點:

toggle與slideToggle細節區別：

• toggle：動態效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性

• slideToggle：動態效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性

fadeToggle方法

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。

• 元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。

• 元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。

• 注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局

?<ul>

? ? ? ? <a></a>

? ? ? ? <a></a>

? ? ? ? <li id="test1">1</li>

? ? ? ? <li id="test2">2</li>

? ? ? ? <li id="test3">3</li>

? ? </ul>

? ? <ul>

? ? ? ? <li id="test4">4</li>

? ? ? ? <li id="test5">5</li>

? ? ? ? <li id="test6">6</li>

? ? </ul>

? $span.text($("li").index()；

索引結果：2

• 如果不傳遞任何參數給 .index() 方法，則返回值就是jQuery對象中第一個元素相對于它同輩元素的位置

$aaron.get(index)? ? ? 中index可為 負值

$aaron[index]? ? ?中index 非負值

alert("值的長度：" + $.trim($("#results2").val()).length)

• 移除字符串 開始 和 結尾處 的所有換行符，空格(包括連續的空格)和制表符（tab）

• 如果這些空白字符在字符串 中間 時，它們將被? 保留，不會被移除

jQuery.inArray(?value,?array?,[?fromIndex?]?)

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)

? ? ? ? }?

jQuery.each(array,?callback?)
jQuery.each(?object,?callback?)

例如

$.each(arrary,function( ndex,value ))

$.each(obj,function( propertyName,value ))

?$.each(['Aaron', '慕課網'], function(index, item) {

? ? ? ? ? ? ? ? $aaron.append("索引=" + index + "; 元素=" + item);

? ? ? ? ? ? });

$.each({

? ? ? ? ? ? ? ? name: "張三",

? ? ? ? ? ? ? ? age: 18

? ? ? ? ? ? }, function(property, value) {

? ? ? ? ? ? ? ? $aaron.append("屬性名=" + property + "; 屬性值=" + value);

? ? ? ? ? ? });

1. stop()：只會停止第一個動畫，第二個第三個繼續

2. stop(true)：停止第一個、第二個和第三個動畫

3. stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態?

參見：

https://www.jb51.net/article/86785.htm

http://www.xianlaiwan.cn/qadetail/174781?t=254991

.animate(?properties,?options?)