前端學習之路 jQuery動畫

//動畫顯示

$("#divpop").show(speed)

//$("#divpop").toggle(speed) //切換彈出層的顯示狀態

});//單擊空白區域隱藏彈出層

$(document).click(

function

(event));

//單擊彈出層則自身隱藏

$("#divpop").click(

function

(event));

});/*jquery 的動畫函式主要分為三類：

基本動畫函式：既有透明漸變，又有滑動效果，是最常用的動畫效果函式

滑動動畫函式：僅使用滑動漸變效果。

淡入淡出動畫函式：僅使用透明度漸變效果*/

// $("#divpop").show();//

$("#divpop").hide();

$("#divpop").toggle();

$("#divpop").show(200);//

$("#divpop").hide("fast");

$("#divpop").toggle("slow");

//滑動動畫函式

$("#divpop").slidedown(200);

$("#divpop").slideup("fast");

$("#divpop").slidetoggle("slow");

//淡入淡出動畫函式

$("#divpop").fadein(200);

$("#divpop").fadeout("fast");// fadeout後物件將從頁面上消失(不佔位),但是fadeto僅僅是讓其透明(佔位).

//設計彈出層透明度

$("#divpop2").fadeto(0,0.66);

//讓彈出層透明顯示

if($("#divpop2").css("display")=="none")

else

//自定義動畫（待學）

//全域性控制屬性

/*名稱: jquery.fx.off

返回值: boolean

說明:關閉頁面上所有的動畫。

講解:把這個屬性設定為 true 可以立即關閉所有動畫(所有效果會立即執行完畢)。*/

jquery.fx.off=true;

$("#divpop").show(1000);

script>

head>

id="btnshow">display the text promptbutton>

div>

id="divpop"

style="background-color:#f0f0f0; border: solid 1px #000000; position: absolute;display:none;width: 300px;height: 100px;">

style="text-align:center;">pop divdiv>

div>

body>

html>補：摘自實驗樓

自定義動畫函式 custom

animate( params, [duration], [easing], [callback] )
animate( params, options )
stop( [clearqueue], [gotoend] )

引數說明

1.params(可選)

型別:options

說明:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合.

講解:通過把元素的樣式屬性值,從當前值逐漸調整到 params 設定的值而產生動畫效果.

2.duration(可選)

型別:string,number

說明:三種預定速度之一的字串(「slow」,」normal」,or」fast」)或表示動畫時長的毫秒數值(如：1000)

講解:動畫效果持續的時間, 時間越長則變得越慢. 如果省略則不會產生動畫.

3.easing(可選)

型別:string

說明:要使用的擦除效果的名稱(需要外掛程式支援).預設 jquery 提供」linear」和「swing」.

講解:為了讓元素逐漸達到 params 設定的最終效果,我們需要有乙個函式來實現漸變, 這類函式就叫做 easing 函式.但是需要這裡傳遞的只是 easing 函式名稱, 使用前需要先將 easing 函式註冊到 jquery 上.

4.options 引數

型別:options

說明:一組包含動畫選項的值的集合。

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

duration: 與上面的 duration 引數相同 easing: 與上面的 easing 引數相同 complete :型別為 function, 在動畫完成時執行的函式 step: callback

queue (boolean): (預設值: true) 設定為 false 將使此動畫不進入動畫佇列 (jquery 1.2 中新增)

講解

自定義動畫屬於高階應用,在這裡暫時無法做詳細的講解.下面通過兩個示例讓大家簡單了解如何使用自定義動畫.

自定義墜落動畫:

這個示例讓乙個圖層從螢幕最上方掉落到最下方, 並且消失。

jquery animation - fadeto

(document).ready(function() ,

600,

function()

); });

pop div

自定義消散動畫

這個示例讓乙個 div 越來越大，最後消失：

jquery animation - fadeto

(document).ready(function() ,

500

); });

pop div

前端學習之路 jQuery動畫

前端JQuery 動畫效果學習一

前端學習之路（一） jquery應用

web前端 jQuery動畫效果

前端學習之路 jQuery動畫

前端JQuery 動畫效果學習 一

前端學習之路（一） jquery應用

web前端 jQuery動畫效果

相關推薦

前端JQuery 動畫效果學習一