-
slideToggle用滑動動畫顯示(下拉)或隱藏(上卷)一個匹配元素 用法: 1、slideToggle():獲取元素的高度,使這個元素的高度發生改變,從而讓元素里的內容往下或往上滑。 2、slideToggle([duration ],[ complete ]):提供了時間、還有動畫結束的回調。在參數對應的時間內,元素會完成動畫,然后出發回調函數,同時也提供了時間的快速定義,字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。 注意事項: 1、display屬性值保存在jQuery的數據緩存中,所以display可以方便以后可以恢復到其初始值 2、當一個隱藏動畫后,高度值達到0的時候,display 樣式屬性被設置為none,以確保該元素不再影響頁面布局 代碼為一個常用的手風琴demo查看全部
-
.val()方法,當沒設置value屬性時,獲取的是<option>中的文本,如“ <option>慕課網</option>”獲取到的是“慕課網”; 設置了value屬性的話,獲取到就是value的值,如“<option value=‘imooc’>慕課網</option>”獲取到的是“imooc”而不是“慕課網”了。查看全部
-
最簡單的使用:不帶參數--$("elem").slideUp(); 帶參數: .slideUp( [duration ] [, easing ] [, complete ] ) 因為動畫是異步的,所以要在動畫之后執行某些操作就必須要寫到回調函數里面,這里要特別注意查看全部
-
具體使用: $("ele").slideDown(1000, function() { //等待動畫執行1秒后,執行別的動作.... }); 注意事項: 下拉動畫是從無到有,所以一開始元素是需要先隱藏起來的,可以設置display:none 如 果提供回調函數參數,callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回調函數不設置任何參數,但是 this會設成將要執行動畫的那個DOM元素,如果多個元素一起做動畫效果,那么要非常注意,回調函數會在每一個元素執行完動畫后都執行一次,而不是這組 動畫整體才執行一次查看全部
-
display屬性值保存在jQuery的數據緩存中,所以display可以方便以后可以恢復到其初始值 當一個隱藏動畫后,高度值達到0的時候,display 樣式屬性被設置為none,以確保該元素不再影響頁面布局查看全部
-
show與hide方法是修改的display屬性,通過是visibility屬性布局需要通過css方法單獨設置 如果使用!important在你的樣式中,比如display: none !important,如果你希望.show()方法正常工作,必須使用.css('display', 'block !important')重寫樣式 如果讓show與hide成為一個動畫,那么默認執行動畫會改變元素的高度,高度,透明度查看全部
-
toggle、sildeToggle以及fadeToggle的區別: toggle:切換顯示與隱藏效果 sildeToggle:切換上下拉卷滾效果 fadeToggle:切換淡入淡出效果 當然細節上還是有更多的不同點: toggle與slideToggle細節區別: toggle:動態效果為從右至左。橫向動作,toggle通過display來判斷切換所有匹配元素的可見性 slideToggle:動態效果從下至上。豎向動作,slideToggle 通過高度變化來切換所有匹配元素的可見性查看全部
-
toggle方法:用于切換匹配元素的顯示或隱藏狀態 1、toggle():處理元素顯示或者隱藏狀態,不帶參數所以沒有動畫,只是通過改變CSS的display屬性來實現效果。 1.1、如果元素最初是顯示狀態,則會被隱藏 1.2、如果元素最初是隱藏狀態,則會被顯示 2、.toggle([duration ],[complete ]):提供了時間、還有動畫結束的回調。在參數對應的時間內,元素會發生顯示/隱藏的改變,在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法 3、toggle(display):提供一個參數,指定要改變的元素的最終效果,確定是使用show還是hide方法查看全部
-
jQuery中顯示元素的show方法 看一段代碼:使用上一致,結果相反 $('elem').hide(3000).show(3000) 讓元素執行3秒的隱藏動畫,然后執行3秒的顯示動畫 注意事項: show與hide方法是修改的display屬性,通過是visibility屬性布局需要通過css方法單獨設置 如果使用!important在你的樣式中,比如display: none !important,如果你希望.show()方法正常工作,必須使用.css('display', 'block !important')重寫樣式 如果讓show與hide成為一個動畫,那么默認執行動畫會改變元素的高度,高度,透明度查看全部
-
hide()方法將為匹配元素的寬度,高度,以及不透明度,同時進行動畫操作 隱藏元素的hide方法 執行動畫隱藏: .hide(fast/slow) fast和slow分別代表200和600毫秒的延時,就是元素會執行200、600毫秒的動畫后再隱藏。 例子寫法一: $("#a2").hide(2000); 如果要設置動畫的多個參數: $("#a2").hide({ duration:2000, complete:function(){ alert("執行2000毫秒動畫完畢") } }) 寫法二: $("#a1").hide(2000,function () { alert("123"); });查看全部
-
本節用于測試動畫比較好查看全部
-
step每一步完成之后執行的函數,progress每一次動畫調用時候執行的函數,類似于進度條查看全部
-
val()方法,當元素沒有設置value值時獲取的是元素的文本節點內容。設置了value值之后,獲取的是value值內容。 .fadeOut( [duration ], [ complete ] )第一個參數可以設置為fast,slow和數值等。如果沒有設置就是默認值600. $("p").fadeOut(1000, "linear");中的“linear”是勻速變化的意思查看全部
-
var arr = [ "one", "two", "three", "four"]; $.each(arr, function(){ alert(this); }); //上面這個each輸出的結果分別為:one,two,three,four var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]] $.each(arr1, function(i, item){ alert(item[0]); }); //其實arr1為一個二維數組,item相當于取每一個一維數組, //item[0]相對于取每一個一維數組里的第一個值 //所以上面這個each輸出分別為:1 4 7 var obj = { one:1, two:2, three:3, four:4}; $.each(obj, function(key, val) { alert(obj[key]); }); //這個each就有更厲害了,能循環每一個屬性 //輸出結果為:1 2 3 4查看全部
-
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回調 動畫完成時執行的函數,這個可以保證當前動畫確定完成后發會觸發查看全部
舉報
0/150
提交
取消