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