jquery動畫效果學習筆記簡介

基本動畫代碼

jquery動畫效果學習筆記簡介

複製代碼 代碼如下:

$(document)y(function()

{

//基本的動畫函數主要分爲show, hide和toggle三個. 都提供了無參數的版本

//並且都提供了兩個參數的重載,如show( speed, [callback] ),

//callback,簽名如下:function callback() {this;}在回調函數中的this 是執行此函數的`DOM 對象. 會在動畫結束時執行.

//因爲回調函數可以省略, 所以可以傳入一個數值作爲唯一參數, 則會在參數規定的時間內用動畫效果的顯示/隱藏元素

//參數可以使用三種預定速度之一的字符串("slow", "normal", "fast")

//或直接使用數字表示動畫時長,單位是毫秒數值(如500).

//動畫速度

var speed = 500;

//綁定事件處理

$("#btnShow")k(function(event)

{

//取消事件冒泡

Propagation();

//設置彈出層位置

var offset = $(et)et();

$("#divPop")({ top: + $(et)ht()+ "px", left: });

//動畫顯示

$("#divPop")(speed);

});

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

$(document)k(function(event) { $("#divPop")(speed) });

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

$("#divPop")k(function(event) {

Propagation()

$("#divPop")(speed);

});

var flip = 0;

$("#btnP")k(function () {

$("p")le("fast");

//$("p")le( flip++ % 2 == 0 );

});

//綁定事件處理

$("#btnT")k(function(event)

{

//取消事件冒泡

Propagation();

//設置彈出層位置

var offset = $(et)et();

$("#divPop")({ top: + $(et)ht() + "px", left: });

//切換彈出層的顯示狀態

$("#divPop")le(speed);

});

});

顯示提示文字

顯示段落

toggle函數測試

彈出層

這個是一個段落

這個是第二個段落

============================================================

滑動動畫和透明動畫效果代碼:

複製代碼 代碼如下:

$(document)y(function()

{

//滑動動畫效果

$("#btnShow")k(function(){

$("#divPop")eDown("fast");

});

$("#btnHide")k(function(){

$("#divPop")eUp("slow");

});

$("#btnT")k(function(){

$("#divPop")eToggle("slow");

});

//透明度動畫效果

$("#bShow")k(function(){

$("#divPop")In(2000);

});

$("#bHide")k(function(){

$("#divPop")Out("slow");

});

//指定到透明度

$("#bHelf")k(function(){

$("#divPop")To("slow",0.3);

});

});

顯示提示文字

隱藏提示文字

toggle函數測試

淡入

淡出

半透明

彈出層

這個是一個段落

這個是第二個段落