-
fadeIn:淡入效果,內(nèi)容顯示,opacity是0到1 fadeOut:淡出效果,內(nèi)容隱藏,opacity是1到0
如果要讓元素保持動畫效果,執(zhí)行opacity = 0.5的效果時,要如何處理?
如果不考慮CSS3,我們用JS實現(xiàn)的話,基本就是通過定時器,在設(shè)定的時間內(nèi)一點點的修改opacity的值,最終為0.5,原理雖說簡單,但是總不如一鍵設(shè)置這么舒服,jQuery提供了fadeTo方法,可以讓改變透明度一步到位
語法
.fadeTo(?duration,?opacity?,callback)
必需的 duration參數(shù)規(guī)定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度(值介于 0 與 1 之間)??蛇x的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。
查看全部 -
常用語法:.fadeToggle( [duration ] ,[?complete ] )
可選的?duration?參數(shù)規(guī)定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。 可選的 callback 參數(shù)是 fadeToggle完成后所執(zhí)行的函數(shù)名稱。
fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出,則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入,則 fadeToggle() 會向元素添加淡出效果。
查看全部 -
jQuery在做hide操作的時候,是會保存本身的元素的原始屬性值,再之后通過對應(yīng)的方法還原的時候還是初始值。比如一個元素的display屬性值為inline,那么隱藏再顯示時,這個元素將再次顯示inline。一旦透明度 達到0,display樣式屬性將被設(shè)置為none,這個元素將不再在頁面中影響布局
查看全部 -
step:function(now,fx){
//參數(shù)step:規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)
// now:是當(dāng)前動畫正在改變的屬性的實時值;
// fx: jQuery.fx 原型對象的一個引用,其中包含了多項屬性,比如
// 執(zhí)行動畫的元素:elem;
// 動畫正在改變的屬性:prop;
// 正在改變屬性的當(dāng)前值:now;
// 正在改變屬性的結(jié)束值:end;
// 正在改變屬性的單位:unit等查看全部 -
//上卷下拉切換
?$("button").click(function() {
??????????? $("#a1").slideToggle(3000)
??????? });
???????
?//無限循環(huán)上卷下拉切換??????
??????? $("button").click(function() {??????????? setInterval("st()",1000);
??????? });
??????? function st() {??????????? $("#a1").slideToggle(3000);
??????? }
查看全部 -
fadeOut()函數(shù)用于隱藏所有匹配的元素,并帶有淡出的過渡動畫效果
所謂"淡出"隱藏的,元素是隱藏狀態(tài)不對作任何改變,元素是可見的,則將其隱藏。
.fadeOut(?[duration?],?[?complete?]?)
通過不透明度的變化來實現(xiàn)所有匹配元素的淡出效果,并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。這個動畫只調(diào)整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發(fā)生變化。
字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串,或者這個duration參數(shù)被省略,那么默認使用400毫秒的延時
查看全部 -
基本的操作:slideToggle();
這是最基本的操作,獲取元素的高度,使這個元素的高度發(fā)生改變,從而讓元素里的內(nèi)容往下或往上滑。
提供參數(shù):.slideToggle( [duration ] ,[?complete ] )
同樣的提供了時間、還有動畫結(jié)束的回調(diào)。在參數(shù)對應(yīng)的時間內(nèi),元素會完成動畫,然后出發(fā)回調(diào)函數(shù)
同時也提供了時間的快速定義,字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時
slideToggle("fast")? slideToggle("slow")
注意:
display屬性值保存在jQuery的數(shù)據(jù)緩存中,所以display可以方便以后可以恢復(fù)到其初始值
當(dāng)一個隱藏動畫后,高度值達到0的時候,display 樣式屬性被設(shè)置為none,以確保該元素不再影響頁面布局
查看全部 -
對于顯示的元素,在將其隱藏的過程中,可以對其進行一些變化的動畫效果。之前學(xué)過了hide方法,hide方法在顯示的過程中也可以有動畫,但 是.hide()方法將為匹配元素的寬度,高度,以及不透明度,同時進行動畫操作。這里將要學(xué)習(xí)一個新的顯示方法slideUp方法
最簡單的使用:不帶參數(shù)
$("elem").slideUp();
這個使用的含義就是:找到元素的高度,然后采用一個下滑動畫讓元素一直滑到隱藏,當(dāng)高度為0的時候,也就是不可見的時,修改元素display 樣式屬性被設(shè)置為none。這樣就能確保這個元素不會影響頁面布局了
帶參數(shù):
.slideUp(?[duration?]?[,?easing?]?[,?complete?]?)
同樣可以提供一個時間,然后可以使用一種過渡使用哪種緩動函數(shù),jQuery默認就2種,可以通過下載插件支持。最后一個動畫結(jié)束的回調(diào)方法。
查看全部 -
.slideDown():用滑動動畫顯示一個匹配元素
.slideDown()方法將給匹配元素的高度的動畫,這會導(dǎo)致頁面的下面部分滑下去,彌補了顯示的方式
常見的操作,提供一個動畫是時間,然后傳遞一個回調(diào),用于知道動畫是什么時候結(jié)束
.slideDown(?[duration?]?[,?complete?]?)
持續(xù)時間(duration)是以毫秒為單位的,數(shù)值越大,動畫越慢,不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串,或者這個duration參數(shù)被省略,那么默認使用400 毫秒的延時。
具體使用:
$("ele").slideDown(1000,?function()?{ ????//等待動畫執(zhí)行1秒后,執(zhí)行別的動作.... });
注意事項:
下拉動畫是從無到有,所以一開始元素是需要先隱藏起來的,可以設(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í)行一次
?
查看全部 -
基本的操作:toggle();
這是最基本的操作,處理元素顯示或者隱藏,因為不帶參數(shù),所以沒有動畫。通過改變CSS的display屬性,匹配的元素將被立即顯示或隱藏,沒有動畫。
如果元素是最初顯示,它會被隱藏
如果隱藏的,它會顯示出來
display屬性將被儲存并且需要的時候可以恢復(fù)。如果一個元素的display值為inline,然后是隱藏和顯示,這個元素將再次顯示inline
提供參數(shù):.toggle( [duration ] [, complete ] )
同樣的提供了時間、還有動畫結(jié)束的回調(diào)。在參數(shù)對應(yīng)的時間內(nèi),元素會發(fā)生顯示/隱藏的改變,在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法
直接定位:.toggle(display)
直接提供一個參數(shù),指定要改變的元素的最終效果
其實就是確定是使用show還是hide方法
if?(?display?===?true?)?{ ??$(?"elem"?).show(); }?else?if?(?display?===?false?)?{ ??$(?"elem"?).hide(); }
查看全部 -
方法的使用幾乎與hide是一致的,hide是讓元素顯示到隱藏,show則是相反,讓元素從隱藏到顯示
看一段代碼:使用上一致,結(jié)果相反
$('elem').hide(3000).show(3000)
讓元素執(zhí)行3秒的隱藏動畫,然后執(zhí)行3秒的顯示動畫。
show與hide方法是非常常用的,但是一般很少會基于這2個屬性執(zhí)行動畫,大多情況下還是直接操作元素的顯示與隱藏為主
注意事項:
show與hide方法是修改的display屬性,通過是visibility屬性布局需要通過css方法單獨設(shè)置
如果使用!important在你的樣式中,比如display: none !important,如果你希望.show()方法正常工作,必須使用.css('display', 'block !important')重寫樣式
如果讓show與hide成為一個動畫,那么默認執(zhí)行動畫會改變元素的高度,高度,透明度
?
查看全部 -
讓頁面上的元素不可見,一般可以通過設(shè)置css的display為none屬性。但是通過css直接修改是靜態(tài)的布局,如果在代碼執(zhí)行的時候,一般是通過js控制元素的style屬性,這里jQuery提供了一個快捷的方法.hide()來達到這個效果
$elem.hide()
提供參數(shù):
.hide(?options?)
當(dāng)提供hide方法一個參數(shù)時,.hide()就會成為一個動畫方法。.hide()方法將會匹配元素的寬度,高度,以及不透明度,同時進行動畫操作
快捷參數(shù):
.hide("fast?/?slow")
這是一個動畫設(shè)置的快捷方式,'fast' 和 'slow' 分別代表200和600毫秒的延時,就是元素會執(zhí)行200/600毫秒的動畫后再隱藏
注意:
jQuery在做hide操作的時候,是會保存本身的元素的原始屬性值,再之后通過對應(yīng)的方法還原的時候還是初始值。比如一個元素的display屬性值為inline,那么隱藏再顯示時,這個元素將再次顯示inline。一旦透明度 達到0,display樣式屬性將被設(shè)置為none,這個元素將不再在頁面中影響布局
查看全部 -
jQuery中隱藏元素的hide方法
讓頁面上的元素不可見,一般可以通過設(shè)置css的display為none屬性。但是通過css直接修改是靜態(tài)的布局,如果在代碼執(zhí)行的時候,一般是通過js控制元素的style屬性,這里jQuery提供了一個快捷的方法.hide()來達到這個效果
$elem.hide()
提供參數(shù):
.hide(?options?)
當(dāng)提供hide方法一個參數(shù)時,.hide()就會成為一個動畫方法。.hide()方法將會匹配元素的寬度,高度,以及不透明度,同時進行動畫操作
快捷參數(shù):
.hide("fast?/?slow")
這是一個動畫設(shè)置的快捷方式,'fast' 和 'slow' 分別代表200和600毫秒的延時,就是元素會執(zhí)行200/600毫秒的動畫后再隱藏
注意:
jQuery在做hide操作的時候,是會保存本身的元素的原始屬性值,再之后通過對應(yīng)的方法還原的時候還是初始值。比如一個元素的display屬性值為inline,那么隱藏再顯示時,這個元素將再次顯示inline。一旦透明度 達到0,display樣式屬性將被設(shè)置為none,這個元素將不再在頁面中影響布局
查看全部 -
get()方法,是用已經(jīng)索引值找到對應(yīng)元素
index()方法,是用元素去搜索索引值
查看全部 -
$('xxx').get(index),index從0開始索引。也可以傳遞負值,意味倒數(shù),從-1,-2.....開始索引。
功能類似于$('xxx:eq(index)')
$('xxx').get(index)為js對象,可以轉(zhuǎn)換成JQ對象$($('xxx').get(index))使用.css()等JQ方法
查看全部
舉報