jquery自帶的已定義動畫函數

咱們的網頁若是一直是那種靜態不動的，就顯得有點太安靜了。因此，咱們通常會在頁面上添加一些動畫動態效果，讓頁面更加的豐富，如：選項卡、幻燈片、輪播圖等等，這些動畫咱們均可以經過jquery代碼來實現的。其實，jquery也自帶了一些簡單的動畫函數供咱們使用。

1、jquery的【顯示、隱藏、切換】的動畫函數

一、方法 show()顯示、hide()隱藏、toggle()顯示隱藏切換

這3個動畫方法有2個參數：速度 與 回調函數

二、速度參數：

速度參數能夠是：數值、slow(600ms)、normal(400ms)默認、fast(200ms)。

如：

$("div").show(200);
或
$("div").show('fast');
表示div元素在200後顯示

三、回調函數：

實名回調函數，函數名調用自身

$('.show').click(function () {
$('div').first().show('fast', function showSpan() {
$(this).next().show('fast', showSpan);
});
});

匿名函數自調用.使用 arguments.callee 匿名函數自調用

$('.hide').click(function () {
$('div').last().hide('fast', function() {
$(this).prev().hide('fast', arguments.callee);
});
});

2、jquery【向下滑動、向上捲動、切換】動畫函數

向下滑動：slideDown()、
向上捲動：slideUp()、
切換向下滑動與向上捲動：slideToggle()

這3個方法的參數跟show()是同樣的。使用方法也是同樣的。

3、jquery【淡入、淡出、切換】動畫函數

淡入：fadeIn() 【從透明到不透明】
淡出：fadeOut()【從不透明到透明】
切換淡入與淡出：fadeToggle()

還有一個比較特加的淡入淡出函數：fadeTo()

fadeTo()方法：能夠實現一個元素淡入淡出漸變到一個指定的透明度的值。它能夠有3個參數：

fadeTo(速度, 指定的不透明值, 回調函數);

實例1：

$("p").fadeTo("slow", 0.66);
用600毫秒緩慢的將p段落的透明度調整到0.66，大約2/3的可見度。

實例2：帶回調函數

$("p").fadeTo("fast", 0.25, function(){ alert("200毫秒透明度漸變到0.25，我1/4透明度，而後調用回調函數"); });