jquery學習（六） jquery中的動畫

參考鋒利的jquery第二版

1.show和hide方法

呼叫方法：element.hide()隱藏元素，element.show()顯示元素。其實說白了，其原理就是將元素的樣式display值設定為none或block。

若想讓元素慢慢隱藏或顯示，可以為其新增乙個速度的引數，如element.show(500)，表示元素會在500毫秒內慢慢顯示出來。

2.fadein和fadeout方法

fadein和fadeout分別是實現元素淡入和淡出的方法。其原理是通過一段時間內改變元素的不透明度（opacity）動畫來實現淡入淡出的效果的，直到元素最終顯示（display：block）或消失（display：none）。

可設定動畫時長，如element.fadeout(500)。

3.slideup和slidedown方法

slideup和slidedown分別實現上收隱藏和下拉顯示的功能。其原理是通過改變元素的高度動畫來實現的。如果乙個元素的display：none，通過呼叫slidedown方法是，使得元素由上至下延伸顯示。slideup剛好與slidedown相反。

可設定動畫時長，如element.slidedown(500)。

4.自定義動畫方法animate

方法使用animate(params,speed,easing,callback)

params: 一組包含作為動畫屬性和終值的樣式屬性和及其值的集合。

speed:s三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)。

easing: 要使用的擦除效果的名稱(需要外掛程式支援).預設jquery提供"linear" 和 "swing"。

callback:**函式。

例如：element.animate(, 500,'ease-out',

function());

5.停止動畫stop(clearqueue,gotonnd)

clearqueue和gotoend都是可選引數，為bool值。clearqueue表示是否清空當前未執行完的動畫佇列，gotoend表示是否將正在執行的動畫跳轉到末狀態。

舉個栗子：

$(element).hover(function(),200)

.animate(,300);

},function(),200)

.animate(,300);

6.判斷處於動畫狀態

在使用動畫的時候往往為了防止動畫的積累，導致動畫與使用者行為不一致。此時就需要我們知道當前元素是否處於動畫狀態，當元素不出於動畫階段到為其新增動畫，否則不新增。

舉個栗子：

if(!$(element).is(「:animated」)),300).delay(1000) //延遲1000毫秒

. animate(,300);

8.toggle方法元素狀態切換

$(element).toggle(fn1,fn2,fn3…)輪流迴圈切換。

9.slidetoggle方法

通過高度變化來切換匹配元素的可見性。即實現元素下拉顯示和上滑隱藏切換。

$(element).slidetoggle();