-
animate在執(zhí)行動畫中,如果需要觀察動畫的一些執(zhí)行情況,或者在動畫進行中的某一時刻進行一些其他處理,我們可以通過animate提供的第二種設(shè)置語法,傳遞一個對象參數(shù),可以拿到動畫執(zhí)行狀態(tài)一些通知
.animate(?properties,?options?)
options參數(shù)
duration?- 設(shè)置動畫執(zhí)行的時間
easing - 規(guī)定要使用的 easing 函數(shù),過渡使用哪種緩動函數(shù)
step:規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)
progress:每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào),就是一個進度的概念
complete:動畫完成回調(diào)
其中最關(guān)鍵的一點就是:
如果多個元素執(zhí)行動畫,回調(diào)將在每個匹配的元素上執(zhí)行一次,不是作為整個動畫執(zhí)行一次
查看全部 -
properties:一個或多個css屬性的鍵值對所構(gòu)成的Object對象。要特別注意所有用于動畫的屬性必須是數(shù)字的,除非另有說明;這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。比如常見的,border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產(chǎn)生動畫效果的。background-color很明顯不可以,因為參數(shù)是red或者GBG這樣的值,非常用插件,否則正常情況下是不能只用動畫效果的。注意,CSS 樣式使用 DOM 名稱(比如 "fontSize")來設(shè)置,而非 CSS 名稱(比如 "font-size")。
特別注意單位,屬性值的單位像素(px),除非另有說明。單位em 和 %需要指定使用
.animate({ ????left:?50,? ????width:?'50px'??? ????opacity:?'show',?? ????fontSize:?"10em", },?500);
除了定義數(shù)值,每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏
.animate({ ????width:?"toggle" });
如果提供一個以+= 或 -=開始的值,那么目標值就是以這個屬性的當前值加上或者減去給定的數(shù)字來計算的
.animate({? ????left:?'+=50px' },?"slow");
duration時間
動畫執(zhí)行的時間,持續(xù)時間是以毫秒為單位的;值越大表示動畫執(zhí)行的越慢,不是越快。還可以提供'fast' 和 'slow'字符串,分別表示持續(xù)時間為200 和 600毫秒。
easing動畫運動的算法
jQuery庫中默認調(diào)用 swing。如果需要其他的動畫算法,請查找相關(guān)的插件
complete回調(diào)
動畫完成時執(zhí)行的函數(shù),這個可以保證當前動畫確定完成后發(fā)會觸發(fā)
查看全部 -
.animate()方法允許我們在任意的數(shù)值的CSS屬性上創(chuàng)建動畫。2種語法使用,幾乎差不多了,唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用于設(shè)置.css()方法的屬性鍵值對類似,除了屬性范圍做了更多限制。第二個參數(shù)開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了
查看全部 -
.animate(?properties?,[?duration?],?[?easing?],?[?complete?]?) .animate(?properties,?options?)
查看全部 -
toggle與slideToggle細節(jié)區(qū)別:
toggle:動態(tài)效果為從右至左。橫向動作,toggle通過display來判斷切換所有匹配元素的可見性
slideToggle:動態(tài)效果從下至上。豎向動作,slideToggle 通過高度變化來切換所有匹配元素的可見性
fadeToggle方法
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
元素是淡出顯示的,fadeToggle() 會使用淡入效果顯示它們。
元素是淡入顯示的,fadeToggle() 會使用淡出效果顯示它們。
注釋:隱藏的元素不會被完全顯示(不再影響頁面的布局)
查看全部 -
fadeToggle切換fadeOut與fadeIn效果,所謂"切換",即如果元素當前是可見的,則將其隱藏(淡出);如果元素當前是隱藏的,則使其顯示(淡入)。
查看全部 -
淡入的動畫原理:操作元素的不透明度從0%逐漸增加到100%
如果元素本身是可見的,不對其作任何改變。如果元素是隱藏的,則使其可見
查看全部 -
display屬性值保存在jQuery的數(shù)據(jù)緩存中,所以display可以方便以后可以恢復(fù)到其初始值
當一個隱藏動畫后,高度值達到0的時候,display 樣式屬性被設(shè)置為none,以確保該元素不再影響頁面布局
查看全部 -
因為動畫是異步的,所以要在動畫之后執(zhí)行某些操作就必須要寫到回調(diào)函數(shù)里面,這里要特別注意
查看全部 -
下拉動畫是從無到有,所以一開始元素是需要先隱藏起來的,可以設(shè)置display:none
如 果提供回調(diào)函數(shù)參數(shù),callback會在動畫完成的時候調(diào)用。將不同的動畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個回調(diào)函數(shù)不設(shè)置任何參數(shù),但是 this會設(shè)成將要執(zhí)行動畫的那個DOM元素,如果多個元素一起做動畫效果,那么要非常注意,回調(diào)函數(shù)會在每一個元素執(zhí)行完動畫后都執(zhí)行一次,而不是這組 動畫整體才執(zhí)行一次
查看全部 -
show與hide方法是修改的display屬性,通過是visibility屬性布局需要通過css方法單獨設(shè)置
如果使用!important在你的樣式中,比如display: none !important,如果你希望.show()方法正常工作,必須使用.css('display', 'block !important')重寫樣式
如果讓show與hide成為一個動畫,那么默認執(zhí)行動畫會改變元素的高度,高度,透明度
查看全部 -
如果要判斷數(shù)組中是否存在指定值,你需要通過inArray函數(shù)的返回值不等于(或大于)-1來進行判斷
查看全部 -
show與hide方法是修改的display屬性,通過是visibility屬性布局需要通過css方法單獨設(shè)置
如果使用!important在你的樣式中,比如display: none !important,如果你希望.show()方法正常工作,必須使用.css('display', 'block !important')重寫樣式
如果讓show與hide成為一個動畫,那么默認執(zhí)行動畫會改變元素的高度,高度,透明度
查看全部 -
移除字符串開始和結(jié)尾處的所有換行符,空格(包括連續(xù)的空格)和制表符(tab)
如果這個空白字符在字符串中間時,它們將被保留,不會被移除。
查看全部 -
如果要判斷數(shù)組中是否存在指定值,你需要通過該函數(shù)的返回值不等于(或大于)-1來進行判斷
查看全部
舉報