亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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 參數是該函數完成后所執行的函數名稱。

常用語法：.fadeToggle( [duration ] ,[?complete ] )

可選的?duration?參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數是 fadeToggle完成后所執行的函數名稱。

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

jQuery在做hide操作的時候，是會保存本身的元素的原始屬性值，再之后通過對應的方法還原的時候還是初始值。比如一個元素的display屬性值為inline，那么隱藏再顯示時，這個元素將再次顯示inline。一旦透明度 達到0，display樣式屬性將被設置為none，這個元素將不再在頁面中影響布局

step:function(now,fx){
//參數step：規定每個動畫的每一步完成之后要執行的函數
// now:是當前動畫正在改變的屬性的實時值；
// fx: jQuery.fx 原型對象的一個引用,其中包含了多項屬性,比如
// 執行動畫的元素：elem;
// 動畫正在改變的屬性：prop;
// 正在改變屬性的當前值：now;
// 正在改變屬性的結束值：end;
// 正在改變屬性的單位：unit等

//上卷下拉切換

?$("button").click(function() {
??????????? $("#a1").slideToggle(3000)
??????? });
???????
?//無限循環上卷下拉切換??????
??????? $("button").click(function() {

??????????? setInterval("st()",1000);

??????? });
??????? function st() {

??????????? $("#a1").slideToggle(3000);

??????? }

fadeOut()函數用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果

所謂"淡出"隱藏的，元素是隱藏狀態不對作任何改變，元素是可見的，則將其隱藏。

.fadeOut(?[duration?],?[?complete?]?)

通過不透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。

字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數被省略，那么默認使用400毫秒的延時

基本的操作：slideToggle();

這是最基本的操作，獲取元素的高度，使這個元素的高度發生改變，從而讓元素里的內容往下或往上滑。

提供參數：.slideToggle( [duration ] ,[?complete ] )

同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然后出發回調函數

同時也提供了時間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時

slideToggle("fast")?
slideToggle("slow")

注意：

• display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值

• 當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局

對于顯示的元素，在將其隱藏的過程中，可以對其進行一些變化的動畫效果。之前學過了hide方法，hide方法在顯示的過程中也可以有動畫，但 是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這里將要學習一個新的顯示方法slideUp方法

最簡單的使用：不帶參數

$("elem").slideUp();

這個使用的含義就是：找到元素的高度，然后采用一個下滑動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設置為none。這樣就能確保這個元素不會影響頁面布局了

帶參數：

.slideUp(?[duration?]?[,?easing?]?[,?complete?]?)

同樣可以提供一個時間，然后可以使用一種過渡使用哪種緩動函數，jQuery默認就2種，可以通過下載插件支持。最后一個動畫結束的回調方法。

.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();
}

方法的使用幾乎與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成為一個動畫，那么默認執行動畫會改變元素的高度，高度，透明度

?

讓頁面上的元素不可見，一般可以通過設置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，這個元素將不再在頁面中影響布局

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，這個元素將不再在頁面中影響布局

get（）方法，是用已經索引值找到對應元素

index（）方法，是用元素去搜索索引值

$('xxx').get(index)，index從0開始索引。也可以傳遞負值，意味倒數，從-1，-2.....開始索引。

功能類似于$('xxx:eq(index)')

$('xxx').get(index)為js對象，可以轉換成JQ對象$($('xxx').get(index))使用.css()等JQ方法