-
停止動畫stop 動畫在執(zhí)行過程中是允許被暫停的，當(dāng)一個元素調(diào)用.stop()方法，當(dāng)前正在運行的動畫（如果有的話）立即停止 語法： .stop( [clearQueue ] [, jumpToEnd ] ) .stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) stop還有幾個可選的參數(shù)，簡單來說可以這3種情況 .stop(); 停止當(dāng)前動畫，點擊在暫停處繼續(xù)開始 .stop(true); 如果同一元素調(diào)用多個動畫方法，尚未被執(zhí)行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當(dāng)調(diào)用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊列中的動畫其余被刪除并永遠不會運行 .stop(true,true); 當(dāng)前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標(biāo)值 簡單的說：參考下面代碼、 $("#aaron").animate({ height: 300 }, 5000) $("#aaron").animate({ width: 300 }, 5000) $("#aaron").animate({ opacity: 0.6 }, 2000) stop()：只會停止第一個動畫，第二個第三個繼續(xù) stop(true)：停止第一個、第二個和第三個動畫 stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態(tài) 值得注意的問題： 如果動畫未完成停止了，那么動畫完成時執(zhí)行的回調(diào)函數(shù)是不會被調(diào)用的查看全部
-
.animate( properties [, duration ] [, easing ] [, complete ] ) .animate( properties, options ) 參數(shù)分解： properties：一個或多個css屬性的鍵值對所構(gòu)成的Object對象。要特別注意所有用于動畫的屬性必須是數(shù)字的，除非另有說明；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產(chǎn)生動畫效果的。background-color很明顯不可以，因為參數(shù)是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只能動畫效果的。注意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設(shè)置，而非 CSS 名稱（比如 "font-size"）。 特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使 .animate({ left: 50, width: '50px' opacity: 'show', fontSize: "10em", }, 500); 除了定義數(shù)值，每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏 .animate({ width: "toggle" }); 如果提供一個以+= 或 -=開始的值，那么目標(biāo)值就是以這個屬性的當(dāng)前值加上或者減去給定的數(shù)字來計算的 .animate({ left: '+50px' }, "slow"); duration時間 動畫執(zhí)行的時間，持續(xù)時間是以毫秒為單位的；值越大表示動畫執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時間為200 和 600毫秒。 easing動畫運動的算法 jQuery庫中是默認(rèn)的時調(diào)用 swing。在一個恒定的速度進行動畫，如果需要其他的動畫算法，請查找相關(guān)的插件查看全部
-
淡入效果fadeTo 淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個共同的特點，變化的區(qū)間要么是0，要么是1 fadeIn：淡出效果，即要顯示出來，opacity是0到1 fadeOut：淡入效果，即要隱藏出來，opacity是1到0 如果要讓元素保持動畫效果，執(zhí)行opacity = 0.5的效果時，要如何處理？ 如果不考慮CSS3，我們用JS實現(xiàn)的話，基本就是通過定時器，在設(shè)定的時間內(nèi)一點點的修改opacity的值，最終為0.5，原理雖說簡單，但是總不如一鍵設(shè)置這么舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位 語法 .fadeTo( duration, opacity [, complete ] ) 必需的 duration參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）?？蛇x的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。查看全部
-
1、操作元素的顯示和隱藏可以有幾種方法。 （1）例如： ①改變樣式diplay為none ②位置高度為0 ③透明度為0 都能達到這個目的 （2）并且針對這樣的處理jQuery都提供了各自的方法： ①show/hide ②sildeDown/sildeUp ③fadeIn/fadeOut。 除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法 2、toggle、sildeToggle以及fadeToggle的區(qū)別： ①toggle：切換顯示與隱藏效果 ②sildeToggle：切換上下拉卷滾效果 ③fadeToggle：切換淡入淡出效果 （1）toggle與slideToggle細節(jié)區(qū)別： ①toggle：動態(tài)效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性 ②slideToggle：動態(tài)效果從下至上。豎向動作，slideToggle通過高度變化來切換所有匹配元素的可見性 （2）fadeToggle方法 fadeToggle()方法在fadeIn()和fadeOut()方法之間切換。 ①元素是淡出顯示的，fadeToggle()會使用淡入效果顯示它們。 ②元素是淡入顯示的，fadeToggle()會使用淡出效果顯示它們。 注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局）查看全部
-
1、淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個共同的特點，變化的區(qū)間要么是0，要么是1 ①fadeIn：淡出效果，即要顯示出來，opacity是0到1 ②fadeOut：淡入效果，即要隱藏出來，opacity是1到0 2、如要讓元素保持動畫效果，執(zhí)行opacity = 0.5的效果時，要如何處理？ 如果不考慮CSS3，我們用JS實現(xiàn)的話，基本就是通過定時器，在設(shè)定的時間內(nèi)一點點的修改opacity的值，最終為0.5。原理雖說簡單，但是總不如一鍵設(shè)置這么舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位 3、fadeTo方法 （1）語法：.fadeTo( duration, opacity [, complete ] ) ①必需的duration參數(shù)規(guī)定效果的時長。可取值："slow"、"fast"或毫秒。 ②fadeTo()方法中必需的opacity參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于0與1之間）。 ③可選的callback參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。查看全部
-
淡入動畫fadeIn fadeOut是淡出效果，相反的還有淡入效fadeIn,方法使用上兩者都是一致的，只是結(jié)果相反 .fadeIn( [duration ] [, complete ] ) duration：指定過渡動畫運行多長時間(毫秒數(shù))，默認(rèn)值為400。該參數(shù)也可以為字符串"fast"(=200)或"slow"(=600)。 元素顯示完畢后需要執(zhí)行的函數(shù)。函數(shù)內(nèi)的this指向當(dāng)前DOM元素。 fadeIn()函數(shù)用于顯示所有匹配的元素，并帶有淡入的過渡動畫效果。 注意： 淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100% 如果元素本身是可見的，不對其作任何改變。如果元素是隱藏的，則使其可見查看全部
-
1、fadeToggle()函數(shù)：用于切換所有匹配的元素，并帶有淡入/淡出的過渡動畫效果。之前也學(xué)過toggle、slideToggle 也是類似的處理方式 fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當(dāng)前是可見的，則將其隱藏(淡出)；如果元素當(dāng)前是隱藏的，則使其顯示(淡入)。 （1）常用語法：.fadeToggle( [duration ] [, complete ] ) ①可選的duration參數(shù)規(guī)定效果的時長。可取值："slow"、"fast"或毫秒。 ②可選的callback參數(shù)是 fadeToggle完成后所執(zhí)行的函數(shù)名稱。 （2）fadeToggle()方法可以在fadeIn()與fadeOut()方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果；如果元素已淡入，則 fadeToggle()會向元素添加淡出效果。查看全部
-
1、淡入動畫fadeIn ①fadeOut：淡出效果 ②fadeIn：淡入效果（方法使用上兩者都是一致的，只是結(jié)果相反） （1）.fadeIn( [duration ] [, complete ] ) ①duration：指定過渡動畫運行多長時間(毫秒數(shù))，默認(rèn)值為400。該參數(shù)也可以為字符串"fast"(=200)或"slow"(=600)。 ②元素顯示完畢后需要執(zhí)行的函數(shù)。函數(shù)內(nèi)的this指向當(dāng)前DOM元素。 （2）fadeIn()函數(shù)：用于顯示所有匹配的元素，并帶有淡入的過渡動畫效果。 注意： ①淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100% ②如果元素本身是可見的，不對其作任何改變；如果元素是隱藏的，則使其可見。查看全部
-
淡出動畫fadeOut 讓元素在頁面不可見，常用的辦法就是通過設(shè)置樣式的display:none。除此之外還可以一些類似的辦法可以達到這個目的。這里要提一個透明度的方法，設(shè)置元素透明度為0，可以讓元素不可見，透明度的參數(shù)是0~1之間的值，通過改變這個值可以讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。 fadeOut()函數(shù)用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果 所謂"淡出"隱藏的，元素是隱藏狀態(tài)不對作任何改變，元素是可見的，則將其隱藏。 .fadeOut( [duration ] [, complete ] ) 通過不透明度的變化來實現(xiàn)所有匹配元素的淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。這個動畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化。 字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數(shù)8被省略，那么默認(rèn)使用400毫秒的延時查看全部
-
1、讓元素在頁面不可見 ①常用的辦法：通過設(shè)置樣式的display:none。 ②還有一個透明度的方法：設(shè)置元素透明度為0，可以讓元素不可見，透明度的參數(shù)是0~1之間的值，通過改變這個值可以讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。 2、fadeOut()函數(shù)：用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果 所謂"淡出"隱藏：元素是隱藏狀態(tài)不對作任何改變；元素是可見的，則將其隱藏。 （1）.fadeOut( [duration ] [, complete ] ) ①通過不透明度的變化來實現(xiàn)所有匹配元素的淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。這個動畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化。 ②字符串'fast'和'slow'分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數(shù)8被省略，那么默認(rèn)使用400毫秒的延時查看全部
-
上卷下拉切換slideToggle slideDown與slideUp是一對相反的方法。需要對元素進行上下拉卷效果的切換，jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素 基本的操作：slideToggle(); 這是最基本的操作，獲取元素的高度，使這個元素的高度發(fā)生改變，從而讓元素里的內(nèi)容往下或往上滑。 提供參數(shù)：.slideToggle( [duration ] [, complete ] ) 同樣的提供了時間、還有動畫結(jié)束的回調(diào)。在參數(shù)對應(yīng)的時間內(nèi)，元素會完成動畫，然后出發(fā)回調(diào)函數(shù) 同時也提供了時間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時 slideToggle("fast") slideToggle("slow") 注意： display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值 當(dāng)一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局查看全部
-
上卷動畫slideUp 對于顯示的元素，在將其隱藏的過程中，可以對其進行一些變化的動畫效果。之前學(xué)過了hide方法，hide方法在顯示的過程中也可以有動畫，但 是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這里將要學(xué)習(xí)一個新的顯示方法slideUp方法 最簡單的使用：不帶參數(shù) $("elem").slideUp(); 這個使用的含義就是：找到元素的高度，然后采用一個下滑動畫讓元素一直滑到隱藏，當(dāng)高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設(shè)置為none。這樣就能確保這個元素不會影響頁面布局了 帶參數(shù)： .slideUp( [duration ] [, easing ] [, complete ] ) 同樣可以提供一個時間，然后可以使用一種過渡使用哪種緩動函數(shù)，jQuery默認(rèn)就2種，可以通過下載插件支持。最后一個動畫結(jié)束的回調(diào)方法。 因為動畫是異步的，所以要在動畫之后執(zhí)行某些操作就必須要寫到回調(diào)函數(shù)里面，這里要特別注意查看全部
-
toggle();如果元素是顯示的，它會被隱藏。如果隱藏的，它會被顯示。 如果一個元素的display值為inline，然后是隱藏和顯示，這個元素將再次顯示inline .toggle([duration][,complete])提供了持續(xù)的時間，還有動畫結(jié)束的回調(diào)。 toggle(display) 確定是show還是hide if(display === true){ $("elem").show() }else if(display === false){ $("elem").hide() }查看全部
-
下拉動畫slideDown 對于隱藏的元素，在將其顯示出來的過程中，可以對其進行一些變化的動畫效果。之前學(xué)過了show方法，show方法在顯示的過程中也可以有動畫，但是.show()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這里將要學(xué)習(xí)一個新的顯示方法slideDown方法 .slideDown()：用滑動動畫顯示一個匹配元素 .slideDown()方法將給匹配元素的高度的動畫，這會導(dǎo)致頁面的下面部分滑下去，彌補了顯示的方式 常見的操作，提供一個動畫是時間，然后傳遞一個回調(diào)，用于知道動畫是什么時候結(jié)束 .slideDown( [duration ] [, complete ] ) 持續(xù)時間（duration）是以毫秒為單位的，數(shù)值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數(shù)被省略，那么默認(rèn)使用400 毫秒的延時。 具體使用： $("ele").slideDown(1000, function() { //等待動畫執(zhí)行1秒后,執(zhí)行別的動作.... }); 注意事項： 下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設(shè)置display:none 如 果提供回調(diào)函數(shù)參數(shù)，callback會在動畫完成的時候調(diào)用。將不同的動畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個回調(diào)函數(shù)不設(shè)置任何參數(shù)，但是 this會設(shè)成將要執(zhí)行動畫的那個DOM元素，如果多個元素一起做動畫效果，那么要非常注意，回調(diào)函數(shù)會在每一個元素執(zhí)行完動畫后都執(zhí)行一次，而不是這組 動畫整體才執(zhí)行一次查看全部
-
顯示與隱藏切換toggle方法 show與hide是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態(tài)，然后調(diào)用其對應(yīng)的處理方法。比如顯示的元素，那么就要調(diào)用hide，反之亦然。 對于這樣的操作行為，jQuery提供了一個便捷方法toggle用于切換顯示或隱藏匹配元素 基本的操作：toggle(); 這是最基本的操作，處理元素顯示或者隱藏，因為不帶參數(shù)，所以沒有動畫。通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。 如果元素是最初顯示，它會被隱藏 如果隱藏的，它會顯示出來 display屬性將被儲存并且需要的時候可以恢復(fù)。如果一個元素的display值為inline，然后是隱藏和顯示，這個元素將再次顯示inline 提供參數(shù)：.toggle( [duration ] [, complete ] ) 同樣的提供了時間、還有動畫結(jié)束的回調(diào)。在參數(shù)對應(yīng)的時間內(nèi)，元素會發(fā)生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫。這個元素其實就是show與hide的方法 直接定位：.toggle(display) 直接提供一個參數(shù)，指定要改變的元素的最終效果 其實就是確定是使用show還是hide方法 if ( display === true ) { $( "elem" ).show(); } else if ( display === false ) { $( "elem" ).hide(); }查看全部
舉報
0/150
提交
取消