-
1. stop() 停止當前動畫 2. stop(true) 停止當前執行動畫元素的所有動畫行為 3. stop(true,true) 停止當前執行動畫元素的所有動畫行為,并且直接到達動畫最后一幀查看全部
-
options參數 duration - 設置動畫執行的時間 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>'); [ 收起全文 ]查看全部
-
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回調: 動畫完成時執行的函數,這個可以保證當前動畫確定完成后發會觸發查看全部
-
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() 會使用淡出效果顯示它們。 注釋:隱藏的元素不會被完全顯示(不再影響頁面的布局)查看全部
-
fadeIn和fadeOut只能讓opacity從0-1或1-0這2個值之間變化,而fadeTo可以將透明度設置為0-1之間的任意值,相比而言更為靈活 fadeTo(duration,opacity,callback) duration為動畫完成的時間,以毫秒為單位,也可以填slow/fast callback:回調函數查看全部
-
fadeToggle切換fadeOut與fadeIn效果,所謂"切換",即如果元素當前是可見的,則將其隱藏(淡出);如果元素當前是隱藏的,則使其顯示(淡入)。 slideToggle切換slideDown和slideUp效果. toggle切換show和hide效果查看全部
-
adeIn()方法:用于顯示所有匹配的元素,并帶有淡入的過渡動畫效果,使用和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,以確保該元素不再影響頁面布局 代碼為一個常用的手風琴demo查看全部
-
$('a').get(0)查看全部
-
$.inArray(value,array,[fromindex])查看全部
-
隱藏元素的hide方法 讓頁面上的元素不可見,一般可以通過設置css的display為none屬性。但是通過css直接修改是靜態的布局,如果在代碼執行的時候,一般是通過js控制元素的style屬性,這里jQuery提供了一個快捷的方法.hide()來達到這個效果 $elem.hide() 提供參數: .hide( options ) 當提供hide方法一個參數時,.hide()就會成為一個動畫方法。.hide()方法將會匹配元素的寬度,高度,以及不透明度,同時進行動畫操作 快捷參數: .hide("fast / slow") 這是一個動畫設置的快捷方式,'fast' 和 'slow' 分別代表200和600毫秒的延時,就是元素會執行200/600毫秒的動畫后再隱藏 注意: jQuery在做hide操作的時候,是會保存本身的元素的原始屬性值,再之后通過對應的方法還原的時候還是初始值。比如一個元素的display屬性值為inline,那么隱藏再顯示時,這個元素將再次顯示inline。一旦透明度 達到0,display樣式屬性將被設置為none,這個元素將不再在頁面中影響布局查看全部
-
.slideDown():用滑動動畫顯示一個匹配元素 .slideDown()方法將給匹配元素的高度的動畫,這會導致頁面的下面部分滑下去,彌補了顯示的方式 常見的操作,提供一個動畫是時間,然后傳遞一個回調,用于知道動畫是什么時候結束 .slideDown( [duration ] [, complete ] ) 持續時間(duration)是以毫秒為單位的,數值越大,動畫越慢,不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串,或者這個duration參數被省略,那么默認使用400 毫秒的延時。 具體使用: $("ele").slideDown(1000, function() { //等待動畫執行1秒后,執行別的動作.... }); 注意事項: 下拉動畫是從無到有,所以一開始元素是需要先隱藏起來的,可以設置display:none 如 果提供回調函數參數,callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回調函數不設置任何參數,但是 this會設成將要執行動畫的那個DOM元素,如果多個元素一起做動畫效果,那么要非常注意,回調函數會在每一個元素執行完動畫后都執行一次,而不是這組 動畫整體才執行一次查看全部
-
$.inArray('a',['a','b','c','d'])查看全部
-
slideDown() 必須添加css{display:none}查看全部
舉報
0/150
提交
取消