把js的一些動畫效果進行了整理，期中有很多都是參考了網上的高人，甚至有些直接拿過來用了。再次謝過。當做自己的溫習。

1.Show()和Hide()方法

Show()以及Hide()在jquery動畫里應該是最最基本的動畫了吧。如果調用hide()動畫的話，會把css樣式里的display改為none。

語法：$(selector).show(speed,callback)

參數	描述
speed	可選。規定元素從隱藏到完全可見的速度。默認為 "0"。可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設置速度的情況下，元素從隱藏到完全可見的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。
callback	可選。show 函數執行完之后，要執行的函數。 除非設置了 speed 參數，否則不能設置該參數。

參考資料：http://www.w3school.com.cn/jquery/effect_show.asp

注意事項：這個show可以用在有些元素把隱藏的了，比如通過 display:none等等，但是通過實驗知道visibility：hidden 這個沒有效果。

其實 show方法很好理解，就是把需要需要指定的元素可以在指定的時間里把它顯示出來，特別好的是 可以在指定的時間里顯示出來（時間是毫秒），或者可以用三個變量來表示。要是在show里面沒有值的話，那么這個動畫會直接的蹦出來，沒有緩慢的效果。而如果在里面加了值，就會慢慢的出來。

事例：

JS Code：

   <script type="text/javascript">
        $(function () {
            $("#Btn").click(function () {
                $("#div").show(2000);
            });
        })
    </script>

HTML Code：

<input id="Btn" type="button" value="button" />
    <div
        id="div">
        You can't see me.!
  </div>

Hide() 的實現的主要方式和show()是一樣的，只是一個顯示出來，一個隱藏罷了。

$("#Btn").click(function () {
                $("#div2").hide(1000);
            });

當點擊ID為btn這個按鈕的時候，ID為div2 的這個空間隱藏（慢慢的隱藏）。

2.toggle()和 toggle(fn,fn…)

toggle: toggle()方法的效果就是切換元素的可見狀態；即如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

Toggle(fn,fn)每次點擊后依次調用函數；如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數，如果有更多函數，則再次觸發，直到最后一個。隨后的每次點擊都重復對這幾個函數的輪番調用。注意這里本身已經有點擊觸發調用函數的功能，不需要另外.click(fn)了，我一開始操作此函數時就犯了錯。

語法：$(selector).toggle(speed,callback,switch)

參數	描述
speed	可選。規定元素從可見到隱藏的速度（或者相反）。默認為 "0"。可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設置速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。 如果設置此參數，則無法使用 switch 參數。
callback	可選。toggle 函數執行完之后，要執行的函數。 除非設置了 speed 參數，否則不能設置該參數。
switch	可選。布爾值。規定 toggle 是否隱藏或顯示所有被選元素。 True - 顯示所有元素 False - 隱藏所有元素 如果設置此參數，則無法使用 speed 和 callback 參數。

參考資料：1.http://www.w3school.com.cn/jquery/effect_toggle.asp

2.http://api.jquery.com/toggle/

JS Code:

$(document).ready(function(){
  $("#test").toggle(function(){
    $("#content").hide('slow');
   },function(){
     $("#content").show('fast');
   });
});

　　HTML Code:

<p id="test"><input type="button" value="點擊這里" /></p>
<p id="content">當點擊上面的“點擊這里“字樣，這里的內容將隱藏與顯示之間切換</p>

　3.SlideUp()和SlideDown

通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成后可選地觸發一個回調函數這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來。 它們會改變元素的高度。

語法：$(selector).slideUp(speed,callback)

參數	描述
speed	可選。規定元素從可見到隱藏的速度（或者相反）。默認為 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設置速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度（這樣會創造滑動效果）。
callback	可選。slideUp 函數執行完之后，要執行的函數。 除非設置了 speed 參數，否則不能設置該參數。

JS Code

$(function () {
            $("#Btn").click(function () {
                $("#div2").slideUp("slow", function () {
                    alert("I'm go...");
                });
            });
        })

4. fadeIn()和fadeOut()組合

語法:fadeIn(speed, callback)

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

5.自定義動畫方法----animate

可能有的時候，上面的方法并不能滿足我們對平時開發的要求，所以需要我們子定義相應的動畫來滿足。

語法一：

參數	描述
styles	必需。規定產生動畫效果的 CSS 樣式和值。 可能的 CSS 樣式值（提供實例）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight maxWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注釋：CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。
speed	可選。規定動畫的速度。默認是 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast"
easing	可選。規定在不同的動畫點中設置動畫速度的 easing 函數。 內置的 easing 函數： swing linear
callback	可選。animate 函數執行完之后，要執行的函數。

語法二：

參數	描述
styles	必需。規定產生動畫效果的 CSS 樣式和值（同上）。
options	可選。規定動畫的額外選項。 可能的值： speed - 設置動畫的速度 easing - 規定要使用的 easing 函數 callback - 規定動畫完成之后要執行的函數 step - 規定動畫的每一步完成之后要執行的函數 queue - 布爾值。指示是否在效果隊列中放置動畫。如果為 false，則動畫將立即開始 specialEasing - 來自 styles 參數的一個或多個 CSS 屬性的映射，以及它們的對應 easing 函數

在博客園的看到一篇有關animate的文章，如下：

animate(params, options) ：用于創建自定義動畫的函數。

這個函數的關鍵在于指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.

每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值，樣式屬性就會從當前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會為該屬性調用默認的動畫形式。

參數：

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

optionsOptions：一組包含動畫選項的值的集合。

選項：

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

easingString：(默認值: "swing") 要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".

completeFunction：在動畫完成時執行的函數

stepCallback

queueBoolean(默認值: true) 設定為false將使此動畫不進入動畫隊列 (jQuery 1.2中新增)

事例代碼1：

JS Code：

$("#go1").click(function(){
$("#block1").animate( {  "90%"}, { queue: false, duration: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
$("#go2").click(function(){
$("#block2").animate( {  "90%"}, 1000 )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});

HTML Code：

<button id="go1">Animate Block1</button>
<button id="go2">Animate Block2</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>

　效果主要實現：第一個按鈕按了之后展示了不在隊列中的動畫。在div擴展到90%的同時也在增加字體，一旦字體改變完畢后，邊框的動畫才開始。

事例代碼2：

JS Code：

$("p").animate({
left: 50, opacity: 'show'
}, { duration: 500 });

　效果是：用500毫秒將段落移到left為50的地方并且完全清晰顯示出來（透明度為1）

動畫引起的問題：jquery的slideUp、slideDown、slideToggle等涉及滑動效果的一系列函數，在IE瀏覽器下有幾處bug

解決方案：

1. 因position引起的問題

影響：IE全系列

癥狀：在需要slide的層中，如果存在position:absolute 或 position:relative 定位的層，在IE下，滑動過程中這些層不會隨之顯示和隱藏，效果動作完成之后，這些層才會一次性隱藏。

解決方法：沒有別的辦法，只能盡量不在其中使用絕對和相對定位，用別的方法實現需要的DIV定位

2. 因table元素引起的問題

影響：IE6、IE7

癥狀：直接對table元素加入滑動效果時，在部分IE版本下沒有效果

解決方法：在table外部套一個div，對div元素添加滑動效果。

3.網頁開頭一定要加這段

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

JQuery 動畫的原理：

jQuery.animate的每種動畫過渡效果都是通過easing函數實現的。jQuery1.4.2中就預置了兩個這樣的函數：

easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}

從參數名隱約可以推測出firstNum是初始值。要是你的數學學得比較好，你可以發現linear函數是直線方程；要是你的物理學得比較好，你可以發現它是勻速運動的位移方程,那么diff和p就是速度和時間了。

再看看jQuery.animate的原型：

animate: function( prop, speed, easing, callback )

各參數的說明如下：

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

speed：動畫時長。

easing：要使用的擦除效果的名稱。

callback：動畫完成時執行的函數。

元素的當前樣式值（firstNum）可以獲取，動畫時長（p）就是duration，最終樣式值是prop。理論上說，動畫速度（diff）是可 以算出來的。但是這又必然需要另一個函數進行運算。這樣做明顯是不明智的。再看看調用easing函數的相關代碼（位于 jQuery.fx.prototype.step中）：

var t = now()；

...

var n = t - this.startTime;

this.state = n / this.options.duration;

...

this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);

可以發現，p參數的值也就是this.state的值，從上下文得知它實際上是動畫的時間進度。而firstNum和diff的參數值都是寫死的，分別是0和1。這下easing函數的秘密完全被解開，p、firstNum、diff都是百分率而非實際數值，easing函數的返回值也就是位移的進度。diff的值是1，也就是以1倍的速度運行動畫。算出位移進度后，通過“初始值+（最終值-初始值）×進度”就可以算出當前位移值：

this.now = this.start + ((this.end - this.start) * this.pos);

通過setInterval每隔一定時間（jQuery中是13ms）進行一次位移運算，直到當前時間與初始時間的差值大于動畫時長，這就是jQuery.animate的執行過程。

按照常規思路，動畫的實現方式是這樣的：通過setInterval每隔一定時間給某個值增加特定數值，直到這個值達到限制值。這樣做的主要問題是，不同瀏覽器的運行速度不同，從而導致動畫速度有差異，一般是IE下比較慢，Firefox下比較快。而jQuery.animate是以當前時間來決定位移值，某個時刻的位移值總是固定的，因而動畫速度不會有差異。

作者：Lanny☆蘭東才
出處：http://www.cnblogs.com/damonlan
Q Q:*********
E_mail:Damon_lan@163.com or Dongcai.lan@hp.com

本博文歡迎大家瀏覽和轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，在『參考』的文章中，我會表明參考的文章來源，尊重他人版權。若您發現我侵犯了您的版權，請及時與我聯系。

總結

以上是生活随笔為你收集整理的JQuery 动画效果集锦的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。