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函数测试

淡入

淡出

半透明

弹出层

这个是一个段落

这个是第二个段落