jquery 簡單的動畫效果

在html中預設的所有的元素都是不能動的所以要實現動畫效果，必須要將positon 設定為 fixed relative absolute 才能實現

$
(".ex .hide").click(
function(),"slow");
$(this).parents(
".ex").fadeout(
100);
});

動畫在執行完成之後動作才會繼續往下做

之前找過實現乙個div在向上滑動一段距離後消失，一直沒找到，現在算是如願了。

animate 在實現的時候位置可以用相對的也可以用絕對的絕對的就不要說了只要將top 什麼的寫上px就行了，相對路徑的話就要在前面加上 -= 或者 += 來實現。

opacity 是表示透明度然後在將div樣式改一改

<
divclass="ex"style="position:relative; left: 35%;">
<
buttonclass="hide"type="button">隱藏
div>

就能實現動畫的上浮效果。

如果效果要分開，比如要先變大後變小什麼的只要寫兩個 animate就行了。

他就是乙個順序結構在不執行完當前**的時候是不會繼續執行下面的**的。

在實現完動畫之後如果要進行乙個函式的運用，不能直接呼叫那個函式的名字而是要這麼寫

$
(this).parents(
".ex").fadeto(
3000, 0.5,function());

其中裡面的那個tt（）就是你寫的函式的內容，不能直接去呼叫 tt（）；

最後如果你就得寫那麼多$(this)什麼的太麻煩。。好吧你還可以這麼幹

$("button").click(function());

這樣也是實現的方式是不是很簡單～～～

在實現動畫的過程中有時候需要停下來看一下動畫然後截圖，或者動畫已經看過好多遍了不想再看了要跳過就要用到 stop功能了。

實現stop也很簡單，只要在你想要停止的地方加上這個函式就行

$
(".ex .stop").click(
function());

如上是停止父親ex 的動畫效果，stop 有兩個引數，當兩個都不填的時候表示停止當前的動畫效果，在只填乙個的時候，表示停止所有在排隊的動畫效果包括當前的動畫，在兩個都填的時候是表示完成當前的效果並且停止所有的動作。

當然能填true當然能填false 在第乙個為false 第二個為true的時候就會立刻結束當前的操作，並且繼續執行下面的動畫。多點幾下動畫就結束了～～

發先了個比較叼的東西能同步執行

function animater(),);

next();

}).dequeue("fader")

.animate(, )

}function animateu(), );

}這是兩種做法，上一種是能在前一秒不變透明度，後一秒改變透明度但在這兩秒的時間段內一直上公升

下一種是一直上公升但是透明度也一直在變化。

.delay(1000, "fader")是表示fader 這個名字的佇列要延遲一秒鐘執行。

.queue 就像是乙個佇列，他會順序執行佇列裡的**。

.dequeue("fader") 表示開始執行fader 這個名字的佇列。在實現功能的時候， queue：false 是比較重要的一部分，他會將queue 從預設的佇列中拿出來從而實現同步操作。

還有就是在實現這專案的時候

$('div').slideup('slow').slidedown('slow').css();

和下面$('#object').slideup('slow').slidedown('slow').queue(function());

$(this).dequeue();

});是不同的， slideup 和 slidedown 是在相同的佇列裡面的東西他們都在 fx 佇列中，而css 並不是在那個佇列裡面的東西，所以在實現的時候會有問題那就是css是先於動畫執行的，所以上面的話會先變換顏色然後執行動畫效果，而在下面這個的話，因為是將這些都統一放到queue 裡面了所以在實現的時候就會按照順序來執行。

還有另一種寫法就是

其中的next（）就是相當於上面的 dequeue 。他們的作用是繼續執行下面佇列裡的東西，如果不寫這個函式的話就會出現乙個問題那就是你會發現下面佇列裡的東西沒有執行了，因為這就相當於是結束了當前的佇列。你都結束了談什麼繼續執行。

完成的說明在其他部落格上能看見：

jquery 簡單的動畫效果

jQuery之簡單動畫效果

jquery 動畫效果

JQuery動畫效果

jquery 簡單的動畫效果

jQuery之簡單動畫效果

jquery 動畫效果

JQuery動畫效果

相關推薦