-
動畫animate(上): 1:.animate( properties(css屬性鍵值對構成的object對象) ,[ duration時間 ], [ easing 動畫運動的算法], [ complete 回調] ) 2:.animate( properties, options ) .animate()方法允許我們在任意的數值的CSS屬性上創(chuàng)建動畫 ps: 1:properties：一個或多個css屬性的鍵值對所構成的Object對象。要特別注意所有用于動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不可以，因為參數是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只用動畫效果的。 注意：特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用 .animate({ left: 50, width: '50px' opacity: 'show', fontSize: "10em", }, 500); .animate({ width: "toggle" }); animate({ left: '+=50px' }, "slow"); 2：duration時間 動畫執(zhí)行的時間，持續(xù)時間是以毫秒為單位的；值越大表示動畫執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時間為200 和 600毫秒。 3：easing動畫運動的算法 jQuery庫中默認調用 swing。 4：complete回調 動畫完成時執(zhí)行的函數，這個可以保證當前動畫確定完成后發(fā)會觸發(fā)查看全部
-
中toggle與slideToggle以及fadeToggle的比較 操作元素的顯示和隱藏可以有幾種方法。 例如： 改變樣式display為none 設置位置高度為0 設置透明度為0 都能達到這個目的，show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法 1:toggle、sildeToggle以及fadeToggle的區(qū)別： toggle：切換顯示與隱藏效果 sildeToggle：切換上下拉卷滾效果 fadeToggle：切換淡入淡出效果 2:toggle與slideToggle細節(jié)區(qū)別： toggle：動態(tài)效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性 slideToggle：動態(tài)效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性 3:fadeToggle方法 fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。 元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。 元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。 注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局）查看全部
-
淡入效果fadeTo:(淡入到) 語法 .fadeTo( duration, opacity ,callback) 必需的 duration參數規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）?？蛇x的 callback 參數是該函數完成后所執(zhí)行的函數名稱。查看全部
-
淡入淡出切換fadeToggle: fadeToggle()函數用于切換所有匹配的元素，并帶有淡入/淡出的過渡動畫效果 ps:fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)。 常用語法：.fadeToggle( [duration ] ,[ complete ] ) 可選的 duration 參數規(guī)定效果的時長?？蛇x的 callback 參數是 fadeToggle完成后所執(zhí)行的函數名稱。查看全部
-
淡入動畫fadeIn： .fadeIn( [duration ], [ complete ] ) duration：指定過渡動畫運行多長時間(毫秒數)，默認值為400。該參數也可以為字符串"fast"(=200)或"slow"(=600)。 元素顯示完畢后需要執(zhí)行的函數。函數內的this指向當前DOM元素 fadeIn()函數用于顯示所有匹配的元素，并帶有淡入的過渡動畫效果。 注意：淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100% 如果元素本身是可見的，不對其作任何改變。如果元素是隱藏的，則使其可見查看全部
-
淡出動畫fadeOut: 設置元素透明度為0，可以讓元素不可見，透明度的參數是0~1之間的值，通過改變這個值可以讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。 1:fadeOut()函數用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果 .fadeOut( [duration ], [ complete ] )查看全部
-
上卷下拉切換slideToggle: slideToggle用滑動動畫顯示或隱藏一個匹配元素 基本的操作：slideToggle(); 提供參數：.slideToggle( [duration ] ,[ complete ] ) 同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然后出發(fā)回調函數 同時也提供了時間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時 slideToggle("fast") ps: display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值 當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局查看全部
-
上卷動畫slideUp: 1: 最簡單的使用：不帶參數 .slideUp( [duration 時間] [, easing 速度] [, complete 回調函數] ) $("elem").slideUp(); 這個使用的含義就是：找到元素的高度，然后采用一個下滑動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設置為none 2： 帶參數： .slideUp( [duration ] [, easing ] [, complete ] ) 提供一個時間，然后可以使用一種過渡使用哪種緩動函數，jQuery默認就2種，可以通過下載插件支持。最后一個動畫結束的回調方法。 ps: 因為動畫是異步的，所以要在動畫之后執(zhí)行某些操作就必須要寫到回調函數里面，這里要特別注意查看全部
-
jQuery中下拉動畫slideDown: .slideDown()：用滑動動畫顯示一個匹配元素 常見的操作，提供一個動畫是時間，然后傳遞一個回調，用于知道動畫是什么時候結束 .slideDown( [duration ] [, complete ] ) 持續(xù)時間（duration）是以毫秒為單位的，數值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數被省略，那么默認使用400 毫秒的延時。 $("ele").slideDown(1000, function() { //等待動畫執(zhí)行1秒后,執(zhí)行別的動作.... });查看全部
-
顯示與隱藏切換toggle方法: jQuery提供了一個便捷方法toggle用于切換顯示或隱藏匹配元素 如果元素是最初顯示，它會被隱藏 如果隱藏的，它會顯示出來 提供參數：.toggle( [duration 時間] [, complete 回調] ) 直接定位：.toggle(display) 直接提供一個參數，指定要改變的元素的最終效果 其實就是確定是使用show還是hide方法 if ( display === true ) { $( "elem" ).show(); } else if ( display === false ) { $( "elem" ).hide(); }查看全部
-
顯示元素的show方法： hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示 $('elem').hide(3000).show(3000) 讓元素執(zhí)行3秒的隱藏動畫，然后執(zhí)行3秒的顯示動畫。 ps注意事項： show與hide方法是修改的display屬性，通過是visibility屬性布局需要通過css方法單獨設置 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式 如果讓show與hide成為一個動畫，那么默認執(zhí)行動畫會改變元素的高度，高度，透明度查看全部
-
hide方法：隱藏 快捷參數： .hide("fast / slow")查看全部
-
jQuery.trim()函數用于去除字符串兩端的空白字符 這個函數很簡單，沒有多余的參數用法查看全部
-
jQuery.each(array, callback ) jQuery.each( object, callback ) 【數組或者對象】【處理函數】 回調函數中傳入的兩個參數，如果遍歷的是數組，第一個參數是索引值，第二個參數是數組的值；如果遍歷是對象，第一個參數是屬性，第二個參數是屬性值。查看全部
-
stop() 動畫隊列如果有多個動畫,停止當前執(zhí)行的動畫,開始下一個動畫 stop(true) 真正的停止,當前動畫停止,隊列里后續(xù)動畫也不執(zhí)行 stop(true,true) 當前動畫動作停止，并且直接展示所有動畫完成后的最終狀態(tài)查看全部
舉報
0/150
提交
取消