国产成人久久精品二区三区,亚洲精品欧美日韩在线,极品少妇被猛的白浆直喷白浆

成人黃色A片免费看三更小说,精品人妻av区波多野结衣,亚洲第一极品精品无码,欧美综合区自拍亚洲综合,久久99青青精品免费观看,中文字幕在线中字日韩 ,亚洲国产精品18久久久久久,黄色在线免费观看

從零開(kāi)始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫(huà)-讓頁(yè)面動(dòng)起來(lái)!

2013-4-15 藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://www.cnblogs.com/zhangziqiu/archive/2009/05/08/jQuery-Learn-7.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

一.摘要

本系列文章將帶您進(jìn)入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗(yàn)和解決方案, 即使你會(huì)使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

開(kāi)發(fā)人員一直痛疼做動(dòng)畫(huà). 但是有了jQuery你會(huì)瞬間成為別人(那些不知道jQuery的人)眼里的動(dòng)畫(huà)高手! 本文將介紹jQuery的動(dòng)畫(huà)相關(guān)函數(shù).原來(lái)做動(dòng)畫(huà)如此簡(jiǎn)單!

二.前言

本系列文章的實(shí)例都是針對(duì)某一個(gè)技術(shù)細(xì)節(jié)的, 因?yàn)槲覀円獙W(xué)習(xí)的是基礎(chǔ)知識(shí), 雖然總有人希望要復(fù)雜一些的應(yīng)用示例, 但是我想還是讓我們先把基礎(chǔ)打牢, 有了扎實(shí)的基礎(chǔ)憑借每個(gè)人的智慧一定能創(chuàng)造出更多更好的應(yīng)用.

就在寫(xiě)這篇文章的前幾天, 還有不止一個(gè)同事在為了"彈出層"效果而犯愁. 但是以后再面對(duì)這樣的功能看過(guò)本篇文章的每一個(gè)人都可以開(kāi)心的微笑了. jQuery, make work easy !

三.從實(shí)例開(kāi)始

做web程序經(jīng)常要使用彈出層, 比如單擊文字或按鈕顯示一段提示文字等. 假設(shè)有如下需求:

單擊圖中的"顯示提示文字"按鈕, 在按鈕的下方顯示一個(gè)彈出層.
單擊任何空白區(qū)域或者彈出層,彈出層消失.

用原始javascript我們也完全可以完成這個(gè)工作. 有以下幾點(diǎn)注意事項(xiàng):

1. 彈出層的位置需要?jiǎng)討B(tài)計(jì)算. 因?yàn)橛|發(fā)彈出事件的對(duì)象可能出現(xiàn)在頁(yè)面的任何位置, 比如截圖中的位置.

2. 為document綁定單擊是關(guān)閉彈出層的函數(shù), 要使用多播委托, 否則可能沖掉其他人在document綁定的函數(shù).

3. 為document綁定了關(guān)閉函數(shù)后, 需要在顯示函數(shù)中取消事件冒泡, 否則彈出層將顯示后立刻關(guān)閉.

用jQuery, 我們可以輕松地實(shí)現(xiàn)此實(shí)例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>jQuery - Start Animation</title>     <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>     <script type="text/javascript">
        $(document).ready(function()
        {
            //動(dòng)畫(huà)速度             var speed = 500;

            //綁定事件處理             $("#btnShow").click(function(event)
            {
                //取消事件冒泡                 event.stopPropagation();
                //設(shè)置彈出層位置                 var offset = $(event.target).offset();
                $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
                //動(dòng)畫(huà)顯示                 $("#divPop").show(speed);

            });
            //單擊空白區(qū)域隱藏彈出層             $(document).click(function(event) { $("#divPop").hide(speed) });
            //單擊彈出層則自身隱藏             $("#divPop").click(function(event) { $("#divPop").hide(speed) });
        });
    </script> </head> <body>     <div>         <br /><br /><br />         <button id="btnShow">顯示提示文字</button>     </div>         
    <!-- 彈出層 -->     <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;
        width: 300px; height: 100px;">         <div style="text-align: center;">彈出層</div>     </div> </body> </html>

除了實(shí)現(xiàn)了基本的顯示和隱藏功能, 現(xiàn)在顯示和隱藏彈出層是漸變動(dòng)畫(huà)效果! jQuery的動(dòng)畫(huà)函數(shù)如此簡(jiǎn)單, 第一次我在項(xiàng)目中使用時(shí)帶給了我意外的驚喜. 曾經(jīng)我一直為跨瀏覽器計(jì)算位置頭痛, 但是通過(guò)jQuery的offset()函數(shù)和height()函數(shù), 可以的計(jì)算彈出層的位置. 這些函數(shù)是封裝好且跨瀏覽器的. 需要注意要在設(shè)置彈出層位置屬性的時(shí)候,加上"px", 否則在FireFox下容易出現(xiàn)問(wèn)題.

jQuery的動(dòng)畫(huà)函數(shù)主要分為三類:

基本動(dòng)畫(huà)函數(shù): 既有透明度漸變, 又有滑動(dòng)效果. 是最常用的動(dòng)畫(huà)效果函數(shù).
滑動(dòng)動(dòng)畫(huà)函數(shù): 僅使用滑動(dòng)漸變效果.
淡入淡出動(dòng)畫(huà)函數(shù): 僅使用透明度漸變效果.

這三類動(dòng)畫(huà)函數(shù)效果各不相同, 用法基本一致. 大家可以自己嘗試.

另外也許上面的三類函數(shù)效果都不是我們想要的, 那么jQuery也提供了自定義動(dòng)畫(huà)函數(shù), 將控制權(quán)放在我們手里讓我們自己定義動(dòng)畫(huà)效果.

下面對(duì)三類內(nèi)置動(dòng)畫(huà)函數(shù)和自定義動(dòng)畫(huà)函數(shù)分別講解.

四. 基本動(dòng)畫(huà)函數(shù)

上例中使用的show()和hide()是我們使用最多的基本動(dòng)畫(huà)函數(shù).

下面是jQuery的基本動(dòng)畫(huà)函數(shù):

基本動(dòng)畫(huà)函數(shù) Basics

名稱	說(shuō)明	舉例
show( )	顯示隱藏的匹配元素。這個(gè)就是 'show( speed, [callback] )' 無(wú)動(dòng)畫(huà)的版本。如果選擇的元素是可見(jiàn)的，這個(gè)方法將不會(huì)改變?nèi)魏螙\|西。無(wú)論這個(gè)元素是通過(guò)hide()方法隱藏的還是在CSS里設(shè)置了display:none;，這個(gè)方法都將有效。	顯示所有段落: `$("p").show()`
show( speed, [callback])	以優(yōu)雅的動(dòng)畫(huà)顯示所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。可以根據(jù)指定的速度動(dòng)態(tài)地改變每個(gè)匹配元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會(huì)有動(dòng)畫(huà)，效果更流暢。	用緩慢的動(dòng)畫(huà)將隱藏的段落顯示出來(lái)，歷時(shí)600毫秒: `$("p").show(600);`
hide( )	隱藏顯示的元素這個(gè)就是 'hide( speed, [callback] )' 的無(wú)動(dòng)畫(huà)版。如果選擇的元素是隱藏的，這個(gè)方法將不會(huì)改變?nèi)魏螙\|西。	隱藏所有段落: `$("p").hide()`
hide( speed, [callback] )	以優(yōu)雅的動(dòng)畫(huà)隱藏所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。可以根據(jù)指定的速度動(dòng)態(tài)地改變每個(gè)匹配元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會(huì)有動(dòng)畫(huà)，效果更流暢。	用600毫秒的時(shí)間將段落緩慢的隱藏: `$("p").hide("slow");`
toggle( )	切換元素的可見(jiàn)狀態(tài)。如果元素是可見(jiàn)的，切換為隱藏的；如果元素是隱藏的，切換為可見(jiàn)的。	切換所有段落的可見(jiàn)狀態(tài): `$("p").toggle()`
toggle( switch )	根據(jù)switch參數(shù)切換元素的可見(jiàn)狀態(tài)（ture為可見(jiàn)，false為隱藏）。如果switch設(shè)為true，則調(diào)用show()方法來(lái)顯示匹配的元素，如果switch設(shè)為false則調(diào)用hide()來(lái)隱藏元素。	切換所有段落的可見(jiàn)狀態(tài): `var flip = 0; $("button").click(function () { $("p").toggle( flip++ % 2 == 0 ); });`
toggle( speed, [callback] )	以優(yōu)雅的動(dòng)畫(huà)切換所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。可以根據(jù)指定的速度動(dòng)態(tài)地改變每個(gè)匹配元素的高度、寬度和不透明度。在jQuery 1.3中，padding和margin也會(huì)有動(dòng)畫(huà)，效果更流暢。	用200毫秒將段落迅速切換顯示狀態(tài)，之后彈出一個(gè)對(duì)話框: `$("p").toggle("fast",function(){ alert("Animation Done."); });`

1. 使用基本動(dòng)畫(huà)函數(shù)

基本的動(dòng)畫(huà)函數(shù)主要分為show, hide和toggle三個(gè). 都提供了無(wú)參數(shù)的版本, 表示不適用動(dòng)畫(huà)切換元素的顯示狀態(tài):

$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();

都提供了兩個(gè)參數(shù)的重載, 因?yàn)榛卣{(diào)函數(shù)可以省略, 所以可以像開(kāi)篇實(shí)例中使用的, 傳入一個(gè)數(shù)值作為唯一參數(shù), 則會(huì)在參數(shù)規(guī)定的時(shí)間內(nèi)用動(dòng)畫(huà)效果顯示/隱藏元素:

$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");

如果傳遞了200, 表示圖層會(huì)在200毫秒內(nèi)通過(guò)漸變的形式顯示出來(lái). speed參數(shù)可以使用三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000).

三個(gè)函數(shù)都可以傳入回調(diào)函數(shù)callback,簽名如下:

function callback() {
  this; // dom element }

在回調(diào)函數(shù)中的this是執(zhí)行此函數(shù)的DOM對(duì)象. 會(huì)在動(dòng)畫(huà)結(jié)束時(shí)執(zhí)行.

2. 使用toggle函數(shù)

toggle函數(shù)是功能更強(qiáng)大的函數(shù), 可以切換元素的可見(jiàn)狀態(tài). 我們經(jīng)常遇到需要使用toggle的情況. 比如希望一段文字第一次單擊顯示彈出層, 第二次單擊隱藏彈出層.

我們將開(kāi)篇實(shí)例稍作修改即可實(shí)現(xiàn)這個(gè)效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>jQuery Animation - Toggle </title>     <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>     <script type="text/javascript">
        $(document).ready(function()
        {
            //動(dòng)畫(huà)速度             var speed = 500;

            //綁定事件處理             $("#btnShow").click(function(event)
            {
                //取消事件冒泡                 event.stopPropagation();
                //設(shè)置彈出層位置                 var offset = $(event.target).offset();
                $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
                //切換彈出層的顯示狀態(tài)                 $("#divPop").toggle(speed);

            });
        });
    </script> </head> <body>     <div>         <br /><br /><br />         <button id="btnShow">提示文字</button>     </div>         
    <!-- 彈出層 -->     <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;
        width: 300px; height: 100px;">         <div style="text-align: center;">彈出層</div>     </div> </body> </html>

toggle()函數(shù)可以傳遞一個(gè)boolean值的參數(shù), 比如: toogle(true)等同于show(), toogle(fasle)等同于hide().

五. 滑動(dòng)動(dòng)畫(huà)函數(shù)

基本動(dòng)畫(huà)函數(shù)的效果是一個(gè)綜合了滑動(dòng)和透明度漸變的函數(shù), jQuery還單獨(dú)提供了只有滑動(dòng)效果的相關(guān)函數(shù).

滑動(dòng)動(dòng)畫(huà)函數(shù) Sliding

名稱	說(shuō)明	舉例
slideDown(speed, [callback])	通過(guò)高度變化（向下增大）來(lái)動(dòng)態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫(huà)效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式顯示出來(lái)。在jQuery 1.3中，上下的padding和margin也會(huì)有動(dòng)畫(huà)，效果更流暢。	用600毫秒緩慢的將段落滑下: `$("p").slideDown("slow");`
slideUp(speed, [callback])	通過(guò)高度變化（向上減小）來(lái)動(dòng)態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。	用600毫秒緩慢的將段落滑上: `$("p").slideUp("slow");`
slideToggle(speed, [callback])	通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性，并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。	用600毫秒緩慢的將段落滑上或滑下: `$("p").slideToggle("slow");`

講解

slideDown就是show的滑動(dòng)效果版本, slideUp就是hide的滑動(dòng)效果版本, slideToggle就是toggle的滑動(dòng)效果版本.

參數(shù)完全相同:

$("#divPop").slideDown(200);
$("#divPop").slideUp("fast");
$("#divPop").slideToggle("slow");

六.淡入淡出動(dòng)畫(huà)函數(shù)

淡出淡出函數(shù)只提供透明度漸變的效果.

淡入淡出函數(shù) Fading

名稱	說(shuō)明	舉例
fadeIn( speed, [callback] )	通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡入效果，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫(huà)只調(diào)整元素的不透明度，也就是說(shuō)所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。	用600毫秒緩慢的將段落淡入: `$("p").fadeIn("slow");`
fadeOut( speed, [callback] )	通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。	用600毫秒緩慢的將段落淡出: `$("p").fadeOut("slow");`
fadeTo(speed, opacity, [callback])	把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。	用600毫秒緩慢的將段落的透明度調(diào)整到0.66，大約2/3的可見(jiàn)度: `$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);`

講解

fadeIn和fadeOut兩個(gè)函數(shù)對(duì)應(yīng)show和hide, 用于將對(duì)象以透明度漸變的效果顯示和隱藏:

$("#divPop").fadeIn(200);
$("#divPop").fadeOut("fast");

透明度漸變沒(méi)有切換函數(shù).

需要特別講解的是fadeTo函數(shù). 這個(gè)函數(shù)能讓對(duì)象漸變到指定的透明度上. opacity參數(shù)取值從0-1, 比如0.6表示透明度為60%.

和fadeIn與fadeOut不同的是, fadeTo函數(shù)只改變對(duì)象的透明度, 即使透明度為0對(duì)象仍然占位. 而fadeIn和fadeOut最后一定會(huì)改變對(duì)象的display屬性, fadeOut后對(duì)象將從頁(yè)面上消失(不占位), 但是fadeTo僅僅是讓其透明(占位).

fadeTo函數(shù)可以配合fadeIn使用. 比如默認(rèn)的情況下, fadeIn最后讓對(duì)象完全顯示:

但是如果之前使用過(guò)fadeTo設(shè)置彈出層的透明度, 則可以讓其以半透明:

核心代碼如下:

                //設(shè)置彈出層的透明度                 $("#divPop").fadeTo(0, 0.66);

                //讓彈出層透明顯示                 if ($("#divPop").css("display") == "none")
                {
                    $("#divPop").fadeIn(speed);
                }
                else                 {
                    $("#divPop").fadeOut(speed);
                }

用fadeTo設(shè)置了彈出層透明度后, 在使用fadeIn會(huì)讓對(duì)象顯示并且漸變到fadeTo設(shè)置的透明度.

這里介紹的僅僅是兩個(gè)函數(shù)的特性, 實(shí)際應(yīng)用中并不一定要兩者配合使用.

六. 動(dòng)畫(huà)實(shí)驗(yàn)室

動(dòng)畫(huà)實(shí)驗(yàn)室是"jQuery實(shí)戰(zhàn)"一書(shū)中的示例, 方便我們查看上面三種動(dòng)畫(huà)的效果. 對(duì)應(yīng)源代碼的 chapter7\lab.effects.html 文件.源代碼在本文最后提供下載.實(shí)驗(yàn)室截圖如下:

七.自定義動(dòng)畫(huà)函數(shù)

上面三個(gè)漸變動(dòng)畫(huà)函數(shù)已經(jīng)基本滿足了我們?nèi)粘Ｐ枨? 但是如果我們一定要?jiǎng)?chuàng)建自己的特殊的效果, jQuery也為我們提供了相關(guān)函數(shù).

自定義動(dòng)畫(huà)函數(shù) Custom

名稱	說(shuō)明	舉例
animate( params, [duration], [easing], [callback] )	用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫(huà)形式及結(jié)果樣式屬性對(duì)象。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left. 而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫(huà)結(jié)束。如果是一個(gè)數(shù)值，樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫(huà)形式。在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過(guò)在屬性值前面指定 "+=" 或 "-=" 來(lái)讓元素做相對(duì)運(yùn)動(dòng)。 jQuery 1.3中，如果duration設(shè)為0則直接完成動(dòng)畫(huà)。而在以前版本中則會(huì)執(zhí)行默認(rèn)動(dòng)畫(huà)。	點(diǎn)擊按鈕后div元素的幾個(gè)不同屬性一同變化: `// 在一個(gè)動(dòng)畫(huà)中同時(shí)應(yīng)用三種類型的效果 $("#go").click(function(){ $("#block").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000 ); });`
animate( params, options )	用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫(huà)形式及結(jié)果樣式屬性對(duì)象。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left. 而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫(huà)結(jié)束。如果是一個(gè)數(shù)值，樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫(huà)形式。在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過(guò)在屬性值前面指定 "+=" 或 "-=" 來(lái)讓元素做相對(duì)運(yùn)動(dòng)。	第一個(gè)按鈕按了之后展示了不在隊(duì)列中的動(dòng)畫(huà)。在div擴(kuò)展到90%的同時(shí)也在增加字體，一旦字體改變完畢后，邊框的動(dòng)畫(huà)才開(kāi)始: `$("#go1").click(function(){ $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $("#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); });`
stop( [clearQueue], [gotoEnd] )	停止所有在指定元素上正在運(yùn)行的動(dòng)畫(huà)。如果隊(duì)列中有等待執(zhí)行的動(dòng)畫(huà)(并且clearQueue沒(méi)有設(shè)為true)，他們將被馬上執(zhí)行 clearQueue(Boolean):如果設(shè)置成true，則清空隊(duì)列。可以立即結(jié)束動(dòng)畫(huà)。 gotoEnd (Boolean):讓當(dāng)前正在執(zhí)行的動(dòng)畫(huà)立即完成，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等。	點(diǎn)擊Go之后開(kāi)始動(dòng)畫(huà),點(diǎn)Stop之后會(huì)在當(dāng)前位置停下來(lái): `// 開(kāi)始動(dòng)畫(huà) $("#go").click(function(){ $(".block").animate({left: '+200px'}, 5000); }); // 當(dāng)點(diǎn)擊按鈕后停止動(dòng)畫(huà) $("#stop").click(function(){ $(".block").stop(); });`

參數(shù)說(shuō)明

1.params(可選)

類型:Options

說(shuō)明:一組包含作為動(dòng)畫(huà)屬性和終值的樣式屬性和及其值的集合.

講解:通過(guò)把元素的樣式屬性值, 從當(dāng)前值逐漸調(diào)整到params設(shè)置的值而產(chǎn)生動(dòng)畫(huà)效果.

2.duration(可選)

類型:String,Number

說(shuō)明:三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)

講解:動(dòng)畫(huà)效果持續(xù)的時(shí)間, 時(shí)間越長(zhǎng)則變得越慢. 如果省略則不會(huì)產(chǎn)生動(dòng)畫(huà).

3.easing(可選)

類型:String

說(shuō)明:要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing".

講解:為了讓元素逐漸達(dá)到params設(shè)置的最終效果, 我們需要有一個(gè)函數(shù)來(lái)實(shí)現(xiàn)漸變, 這類函數(shù)就叫做easing函數(shù). 但是需要這里傳遞的只是easing函數(shù)名稱, 使用前需要先將easing函數(shù)注冊(cè)到j(luò)Query上.

4.options參數(shù)

類型:Options

說(shuō)明:一組包含動(dòng)畫(huà)選項(xiàng)的值的集合。

講解:所支持的屬性如下:

duration: 與上面的duration參數(shù)相同
easing: 與上面的easing參數(shù)相同
complete :類型為Function, 在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)
step: Callback
queue (Boolean): (默認(rèn)值: true) 設(shè)定為false將使此動(dòng)畫(huà)不進(jìn)入動(dòng)畫(huà)隊(duì)列 (jQuery 1.2中新增)

講解

自定義動(dòng)畫(huà)屬于高級(jí)應(yīng)用, 在這里我暫時(shí)無(wú)法做詳細(xì)的講解.下面通過(guò)兩個(gè)示例讓大家簡(jiǎn)單了解如何使用自定義動(dòng)畫(huà).

Bug提示: 下面兩個(gè)示例使用vsdoc2智能提示版本的jQuery類庫(kù)在FireFox下存在透明度無(wú)法漸變的問(wèn)題. 請(qǐng)使用其他版本.

自定義墜落動(dòng)畫(huà):

這個(gè)示例讓一個(gè)圖層從屏幕最上方掉落到最下方, 并且消失.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>jQuery Animation - fadeTo </title>     <script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>     <script type="text/javascript">
        $(document).ready(function()
        {
            $("#divPop")
            .animate(
            {
                "opacity": "hide",
                "top": $(window).height() - $("#divPop").height() - $("#divPop").position().top
            },
            600,
            function() { $("#divPop").hide(); }
            );
        });
    </script> </head> <body>       
    <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; 
        width: 300px; height: 100px; position:absolute;">         <div style="text-align: center;">彈出層</div>     </div> </body> </html>

自定義消散動(dòng)畫(huà):

這個(gè)示例讓一個(gè)div越來(lái)越大最后消失:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>jQuery Animation - fadeTo </title>     <script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>     <script type="text/javascript">
        $(document).ready(function()
        {
            $("#divPop")
            .animate(
            {
                "opacity": "hide",
                "width": $(window).width()-100 ,
                "height": $(window).height()-100
            },
            500
            );
        });
    </script> </head> <body>       
    <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; 
        width: 300px; height: 100px; position:absolute;">         <div style="text-align: center;">彈出層</div>     </div> </body> </html>

八.全局控制屬性

最后講一下和動(dòng)畫(huà)相關(guān)的屬性:

名稱: jQuery.fx.off

返回值: Boolean

說(shuō)明:

關(guān)閉頁(yè)面上所有的動(dòng)畫(huà)。

講解:

把這個(gè)屬性設(shè)置為true可以立即關(guān)閉所有動(dòng)畫(huà)(所有效果會(huì)立即執(zhí)行完畢)。有些情況下可能需要這樣，比如：

* 你在配置比較低的電腦上使用jQuery。

* 你的一些用戶由于動(dòng)畫(huà)效果而遇到了可訪問(wèn)性問(wèn)題

當(dāng)把這個(gè)屬性設(shè)成false之后，可以重新開(kāi)啟所有動(dòng)畫(huà)。

比如下面的代碼會(huì)執(zhí)行一個(gè)禁用的動(dòng)畫(huà):

jQuery.fx.off = true;
$("#divPop").show(1000);

雖然使用了動(dòng)畫(huà)效果的show函數(shù), 但是因?yàn)殛P(guān)閉了所有動(dòng)畫(huà), 所以div會(huì)立刻顯示出來(lái)而沒(méi)有漸變效果.

九.總結(jié)

本文講解了jQuery提供的三種動(dòng)畫(huà)函數(shù):基本動(dòng)畫(huà), 滑動(dòng)動(dòng)畫(huà)和淡入淡出動(dòng)畫(huà). 使用這三種動(dòng)畫(huà)已經(jīng)基本可以滿足我們的日常開(kāi)發(fā)需求, 讓我們的頁(yè)面動(dòng)起來(lái). 簡(jiǎn)單舉例講解了自定義動(dòng)畫(huà). 對(duì)于想深入研究的人本文只能起到拋磚引玉的效果.

代碼下載:

http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy.rar

出品公司：

藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司)是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的視覺(jué)設(shè)計(jì)、ui界面設(shè)計(jì)、網(wǎng)站建設(shè)、用戶體驗(yàn)服務(wù)，涉及互聯(lián)網(wǎng)、IT軟件、電子、銀行、保健品等多個(gè)行業(yè)，并建立了良好的口碑，積累了豐富的經(jīng)驗(yàn)。
全國(guó)統(tǒng)一服務(wù)熱線 400-608-6026 QQ:896757335

« 從零開(kāi)始學(xué)習(xí)jQuery (八) 插播:jQuery實(shí)施方案從零開(kāi)始學(xué)習(xí)jQuery (六) AJAX快餐 »

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lzhte.cn

存檔