-
animate()方法：可以精確的控制樣式屬性從而執行動畫，允許我們在任意數值的CSS屬性上創建動畫。 語法： .animate(properties ,[ duration ], [ easing ], [ complete ] ) .animate( properties, options ) 參數分解： 1、properties： 一個或多個css屬性鍵值對所構成的Object對象。要特別注意所有用于動畫的屬性必須是數字的，比如：border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。 注意： 1.1、CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。 1.2、屬性值的單位像素（px），單位em 和 %需要指定使用 1.3、除了定義數值，每個屬性能使用'show', 'hide', 和 'toggle'，這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏。 1.4、如果提供一個以+= 或 -=開始的值，那么目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的。 2、duration時間： 動畫執行的時間，持續時間是以毫秒為單位的；值越大表示動畫執行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續時間為200 和 600毫秒。 3、easing動畫運動的算法： jQuery庫中默認調用 swing。如果需要其他的動畫算法，請查找相關的插件 4、complete回調： 動畫完成時執行的函數，這個可以保證當前動畫確定完成后發會觸發查看全部
-
如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式查看全部
-
總結： 操作元素的顯示和隱藏可以有幾種方法，如： 1、改變樣式display為none——》show/hide——》toggle 2、設置高度為0——》sildeDown/sildeUp——》sildeToggle 3、設置透明度為0——》fadeIn/fadeOut——》fadeToggle toggle、sildeToggle以及fadeToggle的區別： toggle：切換顯示與隱藏效果 sildeToggle：切換上卷與下拉效果 fadeToggle：切換淡入與淡出效果 toggle與slideToggle細節區別： 1、toggle：動態效果為從右至左，橫向動作，toggle通過display來判斷切換所有匹配元素的可見性 2、slideToggle：動態效果從下至上，豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性 fadeToggle方法： 1、fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。 2、元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。 3、元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。 4、注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局）查看全部
-
淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性 fadeIn：淡入效果，內容顯示，opacity是0到1 fadeOut：淡出效果，內容隱藏，opacity是1到0 fadeTo(duration,opacity,callback)： duration參數：必需的，規定動畫效果的時長，它可以取以下值："slow"、"fast" 或毫秒。 opacity參數：必需的，將淡入淡出效果設置為給定的透明度（值介于 0 與 1 之間）。 callback參數：可選的，是該函數完成后所執行的函數名稱。查看全部
-
fadeToggle()函數用于切換所有匹配元素的淡入淡出，并帶有過渡動畫效果 所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)。 fadeToggle([duration ],[ complete ]) 可選的 duration 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數是 fadeToggle完成后所執行的函數名稱。查看全部
-
fadeIn()方法：用于顯示所有匹配的元素，并帶有淡入的過渡動畫效果，使用和fadeOut相同 fadeIn([duration ],[ complete ]) 1、duration：指定過渡動畫運行多長時間(毫秒數)，默認值為400。該參數也可以為字符串"fast"(=200)或"slow"(=600)。 2、元素顯示完畢后需要執行的函數。函數內的this指向當前DOM元素。 注意事項： 1、淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100% 2、如果元素本身是可見的，不對其作任何改變。如果元素是隱藏的，則使其可見查看全部
-
fadeOut()函數通過改變透明度來隱藏所有匹配的元素，并帶有淡出的過渡動畫效果 .fadeOut([duration ],[ complete ]) 通過透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。 字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數被省略，那么默認使用400毫秒的延時查看全部
-
slideToggle用滑動動畫顯示(下拉)或隱藏(上卷)一個匹配元素 用法： 1、slideToggle()：獲取元素的高度，使這個元素的高度發生改變，從而讓元素里的內容往下或往上滑。 2、slideToggle([duration ],[ complete ])：提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然后出發回調函數，同時也提供了時間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。 注意事項： 1、display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值 2、當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局查看全部
-
slideUp()方法：用滑動動畫隱藏一個匹配元素 找到元素的高度，然后采用一個上卷動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設置為none。這樣就能確保這個元素不會影響頁面布局了 用法： 1、$("elem").slideUp(); 2、.slideUp( [duration ] [, easing ] [, complete ] ) 同樣可以提供一個時間，然后可以使用一種過渡使用哪種緩動函數，jQuery默認就2種，可以通過下載插件支持。最后一個動畫結束的回調方法。 注意事項： 因為動畫是異步的，所以要在動畫之后執行某些操作就必須要寫到回調函數里面，這里要特別注意查看全部
-
.slideDown()：用滑動動畫顯示一個匹配元素 .slideDown()方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式 用法：.slideDown( [duration ], [complete ] ) 提供一個動畫的時間，然后傳遞一個回調，用于知道動畫是什么時候結束，持續時間（duration）是以毫秒為單位的，數值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數被省略，那么默認使用400 毫秒的延時。 注意事項： 1、下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設置display:none 2、如果提供回調函數參數，callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回調函數不設置任何參數，但是 this會設成將要執行動畫的那個DOM元素，如果多個元素一起做動畫效果，那么要非常注意，回調函數會在每一個元素執行完動畫后都執行一次，而不是這組 動畫整體才執行一次查看全部
-
toggle方法：用于切換匹配元素的顯示或隱藏狀態 1、toggle()：處理元素顯示或者隱藏狀態，不帶參數所以沒有動畫，只是通過改變CSS的display屬性來實現效果。 1.1、如果元素最初是顯示狀態，則會被隱藏 1.2、如果元素最初是隱藏狀態，則會被顯示 2、.toggle([duration ],[complete ])：提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法 3、toggle(display)：提供一個參數，指定要改變的元素的最終效果，確定是使用show還是hide方法查看全部
-
hide()方法：讓元素顯示到隱藏 show()方法：讓元素從隱藏到顯示 如：$('elem').hide(3000).show(3000)表示讓元素執行3秒的隱藏動畫，然后執行3秒的顯示動畫。 注意事項： 1、show與hide方法是修改的display屬性，如果是通過visibility屬性布局需要通過css方法單獨設置 2、如果使用!important在樣式中，比如display: none !important，希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式 3、如果讓show與hide成為一個動畫，那么默認執行動畫會改變元素的高度，高度，透明度查看全部
-
hide方法：隱藏元素 用法： 1、無參數 $elem.hide() 2、提供參數：當提供hide方法一個參數時，元素的隱藏就會有動畫效果，.hide()方法將會根據元素的寬度、高度、以及透明度進行動畫操作將元素隱藏。 .hide("fast/slow") 'fast' 和 'slow' 分別代表200和600毫秒的延時，就是元素會執行200/600毫秒的動畫后再隱藏，也可以通過duration來自定義延時時間，單位毫秒 注意事項： jQuery在做hide操作的時候，是會保存本身的原始屬性值，元素在被隱藏之后再次被顯示出來的時候本身的屬性值不變查看全部
-
$(".left").toggle(300)查看全部
-
因為動畫是異步的，所以要在動畫之后執行某些操作就必須要寫到回調函數里面，這里要特別注意查看全部
舉報
0/150
提交
取消