jQuery（7）jquery動畫大體驗
在很多web開發過程中，我們都會用到彈出層的情況，我們再做彈出層的時候大多數都應該用的js實現把。假設有如下需求:
· 單擊圖中的"顯示提示文字"按鈕,在按鈕的下方顯示一個彈出
· 單擊任何空白區域或者彈出層,彈出層消失
用原始javascript我們也完全可以完成這個工作. 有以下幾點注意事項:
1.彈出層的位置需要動態計算.因為觸發彈出事件的物件可能出現在頁面的任何位置,比如截圖中的位置.
2.
3.為document綁定了關閉函式後,需要在顯示函式中取消事件冒泡,否則彈出層將顯示後立刻關閉
· 下面我們來看一下用jquery來實現這裡的彈出層是怎麼實現的：
[html] view plaincopyprint?- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>jQuery – 彈出層動畫</title>
-
<scripttype="text/javascript"src="jquery-1.7.2.js"></script>
- <scripttype="text/javascript">
- $(document).ready(function()
- {
- //動畫速度
- var speed = 500;
- //繫結事件處理
- $("#btnShow").click(function(event)
- {
-
//取消事件冒泡，所謂事件冒泡就是在子控制元件觸發事件時父控制元件也觸發相應的事件
- event.stopPropagation();
- //獲得觸發事件控制元件的位置
- var offset = $(event.target).offset();
- //設定彈出層的位置
- $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
- //動畫顯示彈出層
- $("#divPop").show(speed);
- });
- //單擊空白區域隱藏彈出層
- $(document).click(function(event) { $("#divPop").hide(speed) });
- //單擊彈出層則自身隱藏
- $("#divPop").click(function(event) { $("#divPop").hide(speed) });
- });
- </script>
- </head>
- <body>
- <div>
- <br/><br/><br/>
- <buttonid="btnShow">彈出層</button>
- </div>
- <!-- 彈出層 -->
- <divid="divPop"style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;
- width: 300px; height: 100px;">
- <divstyle="text-align: center;">這裡是彈出層</div>
- </div>
- </body>
- </html>
從上邊程式碼的效果我們可以看到，利用jquery除了實現了自動隱藏和彈出層，還實現了動畫彈出的效果。這樣的效果讓我這個初學jquery的小菜確實歡喜。所以說感覺很有必要專門抽出一篇來講解一下這個jquery動畫。Ok，下面我們就一起來正式看一下jquery動畫的東西
jQuery的動畫函式主要分為三類:
基本動畫函式:既有透明度漸變,又有滑動效果. 是最常用的動畫效果函式.
滑動動畫函式:僅使用滑動漸變效果.
淡入淡出動畫函式:僅使用透明度漸變效果.
這三類動畫函式效果各不相同,用法基本一致.大家可以自己嘗試.另外也許上面的三類函式效果都不是我們想要的,那麼jQuery也提供了自定義動畫函式,將控制權放在我們手裡讓我們自己定義動畫效果。下面我們就來一一看一下這三種動畫函式。
一.基本動畫函式：1、show() 顯示隱藏匹配元素。這個就是 'show( speed, [callback] )'無動畫的版本。如果選擇的元素是可見的，這個方法將不會改變任何東西。無論這個元素是通過hide()方法隱藏的還是在CSS裡設定了display:none;，這個方法都將有效。 例如：顯示所有段落，$("p").show()
2、show(speed,[callback]) 以優雅的動畫顯示匹配的元素，並且在顯示完成後可選擇返回一個回撥函。可根據指定的速度動態改變每個匹配元素高度、寬度和不透明度。 例如：用緩慢的動畫將隱藏的段落顯示出來，歷時600毫秒，$("p").show(600)
3、hide() 隱藏顯示元素。這個就是 'hide( speed, [callback] )'的無動畫版。如果選擇的元素是隱藏的，這個方法將不會改變任何東西。 例如：隱藏所有段落，$("p").hide()
4、hide(speed,[callback]) 以優雅的動畫隱藏所有匹配的元素，並在顯示完成後可選的觸發一個回撥函式。可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會有動畫，效果更流暢。 例如：用600ms的時間將段落緩慢的隱藏，$("p").hide("slow");
5、toggle 切換元素的可見狀態。如果元素時可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。 例如：切換所有段落的可見狀態，$("p").toggle()
6、toggle(switch） 根據switch引數切花元素的可見狀態(true為可見,false為隱藏)。如果switch設為true,則呼叫show()方法來顯示匹配的元素，如果switch設為false則呼叫hide()來隱藏元素。 例如：切換所有段落的可見狀態，var flip=0;$("button").click(function(){$("p").toggle(flip++%2==0);});
7、toggle(speed,[callback])
以優雅的動畫切換所有匹配的元素，並在顯示完成後可選的觸發一個回撥函式。可根據指定的速度動態的改變每個匹配元素的高度、寬度和不透明度。jquery 1.3,padding和margin也會有動畫,效果更流暢。 例如：用200ms將段落迅速切換顯示狀態，之後彈出一個對話方塊，$("p").toggle("fast",function(){alert("hello
!");});
說明：speed引數可以使用三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000).
二.滑動動畫函式
基本動畫函式的效果是一個綜合了滑動和透明度漸變的函式, jQuery還單獨提供了只有滑動效果的相關函式.
|
名稱 |
說明 |
舉例 |
|
通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回撥函式。 這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。 |
用600毫秒緩慢的將段落滑下: $("p").slideDown("slow"); |
|
|
通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回撥函式。 |
用600毫秒緩慢的將段落滑上: $("p").slideUp("slow"); |
|
|
通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回撥函式。 |
用600毫秒緩慢的將段落滑上或滑下: $("p").slideToggle("slow"); |
說明：
slideDown就是show的滑動效果版本, slideUp就是hide的滑動效果版本, slideToggle就是toggle的滑動效果版本.
引數完全相同:
$("#divPop").slideDown(200);
$("#divPop").slideUp("fast");
$("#divPop").slideToggle("slow");
三.淡入淡出動畫函式
淡出淡出函式只提供透明度漸變的效果.
|
名稱 |
說明 |
舉例 |
|
通過不透明度的變化來實現所有匹配元素的淡入效果，並在動畫完成後可選地觸發一個回撥函式。 這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。 |
用600毫秒緩慢的將段落淡入: $("p").fadeIn("slow"); |
|
|
通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回撥函式。 |
用600毫秒緩慢的將段落淡出: $("p").fadeOut("slow"); |
|
|
把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回撥函式。 |
用600毫秒緩慢的將段落的透明度調整到0.66，大約2/3的可見度: $("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", |
四、自定義動畫函式Custom1、animate(params,[duration],[easing],[callback])用於建立自定義動畫的函式。這個函式的關鍵在於制定動畫形式及結果樣式屬性物件。這個物件中每個屬性都表示一個可以變化的樣式屬性（如height、top或opacity)。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left。而每個屬性的值表示這個樣式屬性到多少是動畫結束。如果是一個數值，樣式屬性就會從當前的值漸變到指定的值。如果使用的是hide、show、toggle這樣的字串值，則會就該屬性呼叫預設的動畫形式。 例如：點選按鈕後div元素的幾個不同屬性一同變化，
[html] view plaincopyprint?- $("#go").click(function(){
- $("#block").animate({
- width:"90%",height:"100%",fontSize:"10em",borderWidth:10
- },1000);
- });
2、stop([clearQueue],[gotoEnd])
停止所有在指定元素上正在執行的動畫。如果佇列中有等待執行的動畫(並且clearQueue沒有設為true)，他們將被馬上執行clearQueue(Boolean):如果設定成true，則清空佇列。可以立即結束動畫。gotoEnd
(Boolean):讓當前正在執行的動畫立即完成，並且重設show和hide的原始樣式，呼叫回撥函式等。 例如：點選Go之後開始動畫,點Stop之後會在當前位置停下來:
- //開始動畫
- $("#go").click(function(){
- $(".block").animate({left: '+200px'}, 5000);
- });
- //當點選按鈕後停止動畫
- $("#stop").click(function(){
- $(".block").stop();
- });