-
stop還有幾個可選的參數,簡單來說可以這3種情況
.stop(); 停止當前動畫,點擊在暫停處繼續開始
.stop(true); 如果同一元素調用多個動畫方法,尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始,直到第一個完成。當調用.stop()的時候,隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那么在隊列中的動畫其余被刪除并永遠不會運行
.stop(true,true); 當前動畫將停止,但該元素上的 CSS 屬性會被立刻修改成動畫的目標值
簡單的說:參考下面代碼、
$("#aaron").animate({ ????height:?300 },?5000) $("#aaron").animate({ ????width:?300 },?5000) $("#aaron").animate({ ????opacity:?0.6 },?2000)
stop():只會停止第一個動畫,第二個第三個繼續
stop(true):停止第一個、第二個和第三個動畫
stop(true ture):停止動畫,直接跳到第一個動畫的最終狀態?
查看全部 -
jQuery中動畫animate(上)
有些復雜的動畫通過之前學到的幾個動畫函數是不能夠實現,這時候就需要強大的animate方法了
操作一個元素執行3秒的淡入動畫,對比一下2組動畫設置的區別
$(elem).fadeOut(3000)???$(elem).animate({????????opacity:0?},3000)
顯而易見,animate方法更加靈活了,可以精確的控制樣式屬性從而執行動畫
語法:
.animate(?properties?,[?duration?],?[?easing?],?[?complete?]?)?.animate(?properties,?options?)
.animate()方法允許我們在任意的數值的CSS屬性上創建動畫。2種語法使用,幾乎差不多了,唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用于設置.css()方法的屬性鍵值對類似,除了屬性范圍做了更多限制。第二個參數開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了
參數分解:
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回調
動畫完成時執行的函數,這個可以保證當前動畫確定完成后發會觸發
具體可以參考右邊的代碼效果:
查看全部 -
.fadeTo(?duration,?opacity?,callback)
必需的 duration參數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度(值介于 0 與 1 之間)??蛇x的 callback 參數是該函數完成后所執行的函數名稱。
查看全部 -
fadeToggle切換fadeOut與fadeIn效果,所謂"切換",即如果元素當前是可見的,則將其隱藏(淡出);如果元素當前是隱藏的,則使其顯示(淡入)。
常用語法:.fadeToggle( [duration ] ,[?complete ] )
可選的?duration?參數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。 可選的 callback 參數是 fadeToggle完成后所執行的函數名稱。
查看全部 -
fadeOut()函數用于隱藏所有匹配的元素,并帶有淡出的過渡動畫效果
所謂"淡出"隱藏的,元素是隱藏狀態不對作任何改變,元素是可見的,則將其隱藏。
.fadeOut(?[duration?],?[?complete?]?)
通過不透明度的變化來實現所有匹配元素的淡出效果,并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。
字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串,或者這個duration參數被省略,那么默認使用400毫秒的延時
查看全部 -
基本的操作:slideToggle();
這是最基本的操作,獲取元素的高度,使這個元素的高度發生改變,從而讓元素里的內容往下或往上滑。
提供參數:.slideToggle( [duration ] ,[?complete ] )
同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內,元素會完成動畫,然后出發回調函數
同時也提供了時間的快速定義,字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時
slideToggle("fast")? slideToggle("slow")
查看全部 -
.slideDown():用滑動動畫顯示一個匹配元素
.slideDown()方法將給匹配元素的高度的動畫,這會導致頁面的下面部分滑下去,彌補了顯示的方式
常見的操作,提供一個動畫是時間,然后傳遞一個回調,用于知道動畫是什么時候結束
.slideDown(?[duration?]?[,?complete?]?)
持續時間(duration)是以毫秒為單位的,數值越大,動畫越慢,不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串,或者這個duration參數被省略,那么默認使用400 毫秒的延時。
具體使用:
$("ele").slideDown(1000,?function()?{ ????//等待動畫執行1秒后,執行別的動作.... });
注意事項:
下拉動畫是從無到有,所以一開始元素是需要先隱藏起來的,可以設置display:none
如 果提供回調函數參數,callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回調函數不設置任何參數,但是 this會設成將要執行動畫的那個DOM元素,如果多個元素一起做動畫效果,那么要非常注意,回調函數會在每一個元素執行完動畫后都執行一次,而不是這組 動畫整體才執行一次
查看全部 -
基本的操作:toggle();
這是最基本的操作,處理元素顯示或者隱藏,因為不帶參數,所以沒有動畫。通過改變CSS的display屬性,匹配的元素將被立即顯示或隱藏,沒有動畫。
如果元素是最初顯示,它會被隱藏
如果隱藏的,它會顯示出來
display屬性將被儲存并且需要的時候可以恢復。如果一個元素的display值為inline,然后是隱藏和顯示,這個元素將再次顯示inline
提供參數:.toggle( [duration ] [, complete ] )
同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內,元素會發生顯示/隱藏的改變,在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法
直接定位:.toggle(display)
直接提供一個參數,指定要改變的元素的最終效果
其實就是確定是使用show還是hide方法
if?(?display?===?true?)?{ ??$(?"elem"?).show(); }?else?if?(?display?===?false?)?{ ??$(?"elem"?).hide(); }
查看全部 -
$('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成為一個動畫,那么默認執行動畫會改變元素的高度,高度,透明度
查看全部 -
.hide(?options?)
當提供hide方法一個參數時,.hide()就會成為一個動畫方法。.hide()方法將會匹配元素的寬度,高度,以及不透明度,同時進行動畫操作
快捷參數:
.hide("fast?/?slow")
這是一個動畫設置的快捷方式,'fast' 和 'slow' 分別代表200和600毫秒的延時,就是元素會執行200/600毫秒的動畫后再隱藏
查看全部 -
$("#a1").stop().hide(3000).show(3000)
//stop() 用于避免動畫執行過程中反復觸發
//語法結構
$("#div").stop();//停止當前動畫,繼續下一個動畫
$("#div").stop(true);//清除元素的所有動畫
$("#div").stop(false, true);//讓當前動畫直接到達末狀態 ,繼續下一個動畫
$("#div").stop(true, true);//清除元素的所有動畫,讓當前動畫直接到達末狀態查看全部 -
?<h2>trim方法</h2>
??? 未處理
??? <input type="text" name="" id="results1" value=" 前后留空 " />
??? <input id="exec1" type="button" value="點擊執行"> <br />
???
??? trim處理
??? <input type="text" name="" id="results2" value=" 前后留空 " />
??? <input id="exec2" type="button" value="點擊執行">
??? <script type="text/javascript">
??? $("#exec1").click(function() {
??????? alert("值的長度:" + $("#results1").val().length)
??? });??? $("#exec2").click(function() {
???????? alert("值的長度:" + $.trim($("#results2").val()).length)
??? });
??? </script>查看全部 -
語法:參數接受一個jQuery或者dom對象作為查找的條件
.index() .index(?selector?) .index(?element?)
如果不傳遞任何參數給 .index() 方法,則返回值就是jQuery對象中第一個元素相對于它同輩元素的位置
如果在一組元素上調用 .index() ,并且參數是一個DOM元素或jQuery對象, .index() 返回值就是傳入的元素相對于原先集合的位置
如果參數是一個選擇器, .index() 返回值就是原先元素相對于選擇器匹配元素的位置。如果找不到匹配的元素,則 .index() 返回 -1
查看全部 -
移除字符串開始和結尾處的所有換行符,空格(包括連續的空格)和制表符(tab)
如果這些空白字符在字符串中間時,它們將被保留,不會被移除
查看全部 -
.stop(); 停止當前動畫,點擊在暫停處繼續開始
.stop(true); 如果同一元素調用多個動畫方法,尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始,直到第一個完成。當調用.stop()的時候,隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那么在隊列中的動畫其余被刪除并永遠不會運行
.stop(true,true); 當前動畫將停止,但該元素上的 CSS 屬性會被立刻修改成動畫的目標值
查看全部
舉報