-
5-2 來自評論： now和fx是兩個參數，可以隨便寫成其他什么名字，也就是函數有兩個參數，第一個參數是正在變化的屬性的當前值（即代碼中的height值），第二個參數是當前做動畫的對象的引用（即$aaron）。 對于step這個關鍵參數的用法，可看下面的相關注釋，我從網上找到的： on(n,fx){ // 動畫元素的每個動畫屬性每一次動畫效果的執行都將調用的函數。第1個參數是當前動畫正在改變的屬性的實時值（每1次動畫過程中，屬性值的實時反饋呈現）；第2個參數為修改Tween 對象提供了一個機會來改變animate第1個參數中設置的屬性在動畫結束時的值。 // fx: jQuery.fx 原型對象的一個引用,其中包含了多項屬性,比如 // 執行動畫的元素：elem; // 動畫正在改變的屬性：prop; // 正在改變屬性的當前值：now; // 正在改變屬性的結束值：end; // 正在改變屬性的單位：unit;等 關于 progress ： function內有3個參數（正在執行動畫的對象， 進度數值， 完成動畫所需時間 (單位:毫秒) ） 第一個參數可以通過 $aaron.text('ID:'+ arguments[0].elem.id) 觀察，會返回aaron（即執行動畫那個div的id） 第二個參數可以通過 $aaron.text('進度:'+parseInt(arguments[1]*100)+'%') 觀察動畫的執行進度 第三個參數可以通過 $aaron.text('還剩:'+arguments[2]+'毫秒') 觀察完成動畫的所剩時間 http://www.xianlaiwan.cn/article/13963查看全部
-
5-1 animate xxx 來自評論： CSS鍵值對和時間之間一定要有逗號 按照W3School標準： 當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 fontSize 而不是 font-size，使用 marginRight 而不是 margin-right，等等。查看全部
-
4-1 jQuery中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() 會使用淡出效果顯示它們。 注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局） 來自評論： toggle 是對角線式的運動，slideToggle是縱向運動，fadeToggle是原地0/1 +透明度變化 toggle改變display和所有能改變的屬性值，slidetoggle先改變height，當height為0則display為none，fadetoggle先改變opacity，當opacity為0，再改變diasplay為none，查看全部
-
3-4 jQuery中淡入效果fadeTo 淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個共同的特點，變化的區間要么是0，要么是1 fadeIn：淡入效果，內容顯示，opacity是0到1 fadeOut：淡出效果，內容隱藏，opacity是1到0 如果要讓元素保持動畫效果，執行opacity = 0.5的效果時，要如何處理？ 如果不考慮CSS3，我們用JS實現的話，基本就是通過定時器，在設定的時間內一點點的修改opacity的值，最終為0.5，原理雖說簡單，但是總不如一鍵設置這么舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位 語法 .fadeTo( duration, opacity ,callback) 必需的 duration參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）?？蛇x的 callback 參數是該函數完成后所執行的函數名稱。 使用比較簡單，具體使用可以參考右邊代碼：查看全部
-
3-3 jQuery中淡入淡出切換fadeToggle fadeToggle()函數用于切換所有匹配的元素，并帶有淡入/淡出的過渡動畫效果。之前也學過toggle、slideToggle 也是類似的處理方式 fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)。 常用語法：.fadeToggle( [duration ] ,[ complete ] ) 可選的 duration 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數是 fadeToggle完成后所執行的函數名稱。 fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。 具體使用，請參考右邊代碼區域：查看全部
-
3-2 jQuery中淡入動畫fadeIn fadeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上兩者都是一致的，只是結果相反 .fadeIn( [duration ], [ complete ] ) duration：指定過渡動畫運行多長時間(毫秒數)，默認值為400。該參數也可以為字符串"fast"(=200)或"slow"(=600)。 元素顯示完畢后需要執行的函數。函數內的this指向當前DOM元素。 fadeIn()函數用于顯示所有匹配的元素，并帶有淡入的過渡動畫效果。 注意： 淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100% 如果元素本身是可見的，不對其作任何改變。如果元素是隱藏的，則使其可見查看全部
-
3-1 jQuery中淡出動畫fadeOut 讓元素在頁面不可見，常用的辦法就是通過設置樣式的display:none。除此之外還可以一些類似的辦法可以達到這個目的。這里要提一個透明度的方法，設置元素透明度為0，可以讓元素不可見，透明度的參數是0~1之間的值，通過改變這個值可以讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。 fadeOut()函數用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果 所謂"淡出"隱藏的，元素是隱藏狀態不對作任何改變，元素是可見的，則將其隱藏。 .fadeOut( [duration ], [ complete ] ) 通過不透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。 字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數被省略，那么默認使用400毫秒的延時 來自評論： .val()方法，當沒設置value屬性時，獲取的是<option>中的文本，如“ <option>慕課網</option>”獲取到的是“慕課網”； 設置了value屬性的話，獲取到就是value的值，如“<option value=‘imooc’>慕課網</option>”獲取到的是“imooc”而不是“慕課網”了。 因為有2個P，所以彈了2次。 代碼中存在兩個<p>元素，元素的動畫都是相互獨立的，也就是說，每一個<p>元素都獨立的執行了一遍腳本，所以會都會彈出一次提示框，這樣就會彈出兩次。 jQuery只包含了兩個緩動方法：swing和linear。linear方法提供了一個穩定的動畫，以使得動畫的每個步驟都是相同的(例如，如果要讓一個元素以逐漸變化的方式穿過屏幕，每一步的距離和前一步都是相同的)。swing要更加動態一些，隨著動畫的開始變得更加快一些，然后再慢下來。swing是一個常用設置，因此，如果沒有指定任何緩動，jQuery會使用swing方法。查看全部
-
2-3 jQuery中上卷下拉切換slideToggle slideDown與slideUp是一對相反的方法。需要對元素進行上下拉卷效果的切換，jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素 基本的操作：slideToggle(); 這是最基本的操作，獲取元素的高度，使這個元素的高度發生改變，從而讓元素里的內容往下或往上滑。 提供參數：.slideToggle( [duration ] ,[ complete ] ) 同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然后出發回調函數 同時也提供了時間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時 slideToggle("fast") slideToggle("slow") 注意： display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值 當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局。 來自評論： $("#a1").stop().slideToggle(3000) 避免動畫重復執行 因為那個div元素都設置了margin和padding值，hide()和slide()的時候，margin和padding也是在不斷的變化的，因為最終的效果是讓這個元素完全不占用視覺上的空間，所以margin和padding也要逐漸變成0，你把這兩個css樣式去掉就可以發現位置不會發生變化了查看全部
-
2-2 jQuery中上卷動畫slideUp 對于顯示的元素，在將其隱藏的過程中，可以對其進行一些變化的動畫效果。之前學過了hide方法，hide方法在顯示的過程中也可以有動畫，但 是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這里將要學習一個新的顯示方法slideUp方法 最簡單的使用：不帶參數 $("elem").slideUp(); 這個使用的含義就是：找到元素的高度，然后采用一個下滑動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設置為none。這樣就能確保這個元素不會影響頁面布局了 帶參數： .slideUp( [duration ] [, easing ] [, complete ] ) 同樣可以提供一個時間，然后可以使用一種過渡使用哪種緩動函數，jQuery默認就2種，可以通過下載插件支持。最后一個動畫結束的回調方法。 因為動畫是異步的，所以要在動畫之后執行某些操作就必須要寫到回調函數里面，這里要特別注意查看全部
-
2-1 jQuery中下拉動畫slideDown 對于隱藏的元素，在將其顯示出來的過程中，可以對其進行一些變化的動畫效果。之前學過了show方法，show方法在顯示的過程中也可以有動畫，但是.show()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這里將要學習一個新的顯示方法slideDown方法 .slideDown()：用滑動動畫顯示一個匹配元素 .slideDown()方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式 常見的操作，提供一個動畫是時間，然后傳遞一個回調，用于知道動畫是什么時候結束 .slideDown( [duration ] [, complete ] ) 持續時間（duration）是以毫秒為單位的，數值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數被省略，那么默認使用400 毫秒的延時。 具體使用： $("ele").slideDown(1000, function() { //等待動畫執行1秒后,執行別的動作.... }); 注意事項： 下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設置display:none 如 果提供回調函數參數，callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回調函數不設置任何參數，但是 this會設成將要執行動畫的那個DOM元素，如果多個元素一起做動畫效果，那么要非常注意，回調函數會在每一個元素執行完動畫后都執行一次，而不是這組 動畫整體才執行一次 來自評論： slideDown是直接從上往下滑動出來，show是從左至右和上下同時 slideDown和show的區別就是 slideDown只匹配高度查看全部
-
1-4 xxx 來自評論： toggle()適用于通過 jQuery 隱藏的元素 或 在 CSS 中聲明 display:none 的元素（但不適用于 visibility:hidden 的元素） 有個bug，如果你不停地點擊按鈕事件會累積的。 $(".left").stop().toggle(3000)就好了 toggle方法 切換 Hide() 和 Show() 檢查每個元素是否可見。 如果元素已隱藏，則運行 show()。如果元素可見，則元素 hide()。這樣就可以創造切換效果。 語法 $(selector).toggle(speed,callback) speed： 可選。規定 hide/show 效果的速度。默認是 "0"。 可能的值：毫秒（比如 1500）、"slow"、"normal"、"fast" callback： 可選。當 toggle() 方法完成時執行的函數。查看全部
-
1-3 jQuery中顯示元素的show方法 css中有display:none屬性，同時也有display:block，所以jQuery同樣提供了與hide相反的show方法 方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示 看一段代碼：使用上一致，結果相反 $('elem').hide(3000).show(3000) 讓元素執行3秒的隱藏動畫，然后執行3秒的顯示動畫。 show與hide方法是非常常用的，但是一般很少會基于這2個屬性執行動畫，大多情況下還是直接操作元素的顯示與隱藏為主 注意事項： show與hide方法是修改的display屬性，通過是visibility屬性布局需要通過css方法單獨設置 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式 如果讓show與hide成為一個動畫，那么默認執行動畫會改變元素的高度，高度，透明度 連續點擊按鈕會不停地執行; $("#a1").stop().hide(3000).show(3000) //stop（） 用于避免動畫執行過程中反復觸發 //語法結構 $("#div").stop();//停止當前動畫，繼續下一個動畫 $("#div").stop(true);//清除元素的所有動畫 $("#div").stop(false, true);//讓當前動畫直接到達末狀態 ，繼續下一個動畫 $("#div").stop(true, true);//清除元素的所有動畫，讓當前動畫直接到達末狀態查看全部
-
1-2 jQuery中隱藏元素的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，這個元素將不再在頁面中影響布局 來自評論： $(selector).hide(speed,callback); 可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。查看全部
-
$("#a1").stop().hide(3000).show(3000) //stop（） 用于避免動畫執行過程中反復觸發 //語法結構 $("#div").stop();//停止當前動畫，繼續下一個動畫 $("#div").stop(true);//清除元素的所有動畫 $("#div").stop(false, true);//讓當前動畫直接到達末狀態 ，繼續下一個動畫 $("#div").stop(true, true);//清除元素的所有動畫，讓當前動畫直接到達末狀態查看全部
-
通過jQuery獲得所有的a元素合集$("a")，如果想進一步在集合中找到第二個dom元素單獨處理，可以通過get()方法 語法： .get([index]) get方法還可以從后往前索引，傳遞一個負索引值，注意的負值得索引起始值是-1查看全部
舉報
0/150
提交
取消