<a href="/" title="Ubuntu系統(tǒng)_Ubuntu軟件下載_Ubuntu電腦知識(shí)_Ubuntu服務(wù)器_中文網(wǎng)">

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

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

一.摘要

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

開發(fā)人員一直痛疼做動(dòng)畫. 但是有了jQuery你會(huì)瞬間成為別人(那些不知道jQuery的人)眼里的動(dòng)畫高手! 本文將介紹jQuery的動(dòng)畫相關(guān)函數(shù).原來做動(dòng)畫如此簡(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)用.

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

三.從實(shí)例開始

做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)畫速度
            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)畫顯示
                $("#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>

系列文章導(dǎo)航：

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

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

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

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

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

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

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

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

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

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

系列文章導(dǎo)航：

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

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

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

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

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

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

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

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

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

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

系列文章導(dǎo)航：

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