-
.animate( properties, options ) options參數 duration - 設置動畫執行的時間 easing - 規定要使用的 easing 函數,過渡使用哪種緩動函數 step:規定每個動畫的每一步完成之后要執行的函數 progress:每一次動畫調用的時候會執行這個回調,就是一個進度的概念 complete:動畫完成回調 其中最關鍵的一點就是:查看全部
-
參數分解: 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回調 動畫完成時執行的函數,這個可以保證當前動畫確定完成后發會觸發查看全部
-
options參數 duration - 設置動畫執行的時間 easing - 規定要使用的 easing 函數,過渡使用哪種緩動函數 step:規定每個動畫的每一步完成之后要執行的函數 progress:每一次動畫調用的時候會執行這個回調,就是一個進度的概念 complete:動畫完成回調查看全部
-
toggle與slideToggle以及fadeToggle的比較 操作元素的顯示和隱藏可以有幾種方法。 例如: 改變樣式diplay為none 位置高度為0 透明度為0 都能達到這個目的,并且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeInOut。除此之外,還引入了toggle、sildeToggle以及fadeToggle切換方法 toggle、sildeToggle以及fadeToggle的區別: toggle:切換顯示與隱藏效果 sildeToggle:切換上下拉卷滾效果 fadeToggle:切換淡入淡出效果 當然細節上還是有更多的不同點: toggle與slideToggle細節區別: toggle:動態效果為從右至左。橫向動作,toggle通過display來判斷切換所有匹配元素的可見性 slideToggle:動態效果從下至上。豎向動作,slideToggle 通過高度變化來切換所有匹配元素的可見性 fadeToggle方法 fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。 元素是淡出顯示的,fadeToggle() 會使用淡入效果顯示它們。 元素是淡入顯示的,fadeToggle() 會使用淡出效果顯示它們。 注釋:隱藏的元素不會被完全顯示(不再影響頁面的布局)查看全部
-
語法 .fadeTo( duration, opacity [, complete ] )查看全部
-
基本的操作:slideToggle(); 這是最基本的操作,獲取元素的高度,使這個元素的高度發生改變,從而讓元素里的內容往下或往上滑。 提供參數:.slideToggle( [duration ] [, complete ] ) 同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內,元素會完成動畫,然后出發回調函數 同時也提供了時間的快速定義,字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時 slideToggle("fast") slideToggle("slow") 注意: display屬性值保存在jQuery的數據緩存中,所以display可以方便以后可以恢復到其初始值 當一個隱藏動畫后,高度值達到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元素,如果多個元素一起做動畫效果,那么要非常注意,回調函數會在每一個元素執行完動畫后都執行一次,而不是這組 動畫整體才執行一次查看全部
-
toggle方法就是show與hide的相互切換的一個快捷方法,具體使用可以參考右邊的案例:查看全部
-
看一段代碼:使用上一致,結果相反 $('elem').hide(3000).show(3000)查看全部
-
$elem.hide() 提供參數: .hide( options ) 當提供hide方法一個參數時,.hide()成為一個動畫方法。.hide()方法將為匹配元素的寬度,高度,以及不透明度,同時進行動畫操作 快捷參數: .hide(fast / slow) 這是一個動畫設置的快捷方式,'fast' 和 'slow' 分別代表200和600毫秒的延時,就是元素會執行200/600毫秒的動畫后在隱藏查看全部
-
如果你想改成eq()是可以的。但是你只把get()改成eq()是不行的。因為對$()用get(),那個$()所取到的元素就變成了dom,也就是變成了js。那么js取得的元素后面就必須跟js的方法或者屬性,既$().get().style()。而不是$().get().css()。因為style是js獨有的方法,而css()是jq獨有的方法,get()方法后取得的js元素,它只能識別style(),而不能識別css()。查看全部
-
each方法的應用 回調函數中傳入的兩個參數,如果遍歷的是數組,第一個參數是索引值,第二個參數是數組的值;如果遍歷是對象,第一個參數是屬性,第二個參數是屬性值。查看全部
-
toggle、sildeToggle以及fadeToggle的區別: toggle:切換顯示與隱藏效果 sildeToggle:切換上下拉卷滾效果 fadeToggle:切換淡入淡出效果查看全部
-
stop():只會停止第一個動畫,第二個第三個繼續 stop(true):停止第一個、第二個和第三個動畫 stop(true ture):停止動畫,直接跳到第一個動畫的最終狀態查看全部
-
stop還有幾個可選的參數,簡單來說可以這3種情況 .stop(); 停止當前動畫,點擊在暫停處繼續開始 .stop(true); 如果同一元素調用多個動畫方法,尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始,直到第一個完成。當調用.stop()的時候,隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那么在隊列中的動畫其余被刪除并永遠不會運行 .stop(true,true); 當前動畫將停止,但該元素上的 CSS 屬性會被立刻修改成動畫的目標值查看全部
舉報
0/150
提交
取消