jQuery学习笔记之jQuery动画效果_jquery

基本动画代码：

复制代码 代码如下:

//基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本
//并且都提供了两个参数的重载，如show( speed, [callback] ),
//callback,签名如下:function callback() {this;}在回调函数中的this 是执行此函数的DOM 对象. 会在动画结束时执行.
//因为回调函数可以省略, 所以可以传入一个数值作为唯一参数, 则会在参数规定的时间内用动画效果的显示/隐藏元素
//参数可以使用三种预定速度之一的字符串("slow", "normal", "fast")
//或直接使用数字表示动画时长，单位是毫秒数值(如500).

//动画速度
var speed = 500;
//绑定事件处理
$("#btnShow").click(function(event)
{
//取消事件冒泡
event.stopPropagation();
//设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height()+ "px", left: offset.left });
//动画显示
$("#divPop").show(speed);
});
//单击空白区域隐藏弹出层
$(document).click(function(event) { $("#divPop").hide(speed) });
//单击弹出层则自身隐藏
$("#divPop").click(function(event) {
event.stopPropagation()
$("#divPop").hide(speed);
});

var flip = 0;
$("#btnP").click(function () {
$("p").toggle("fast");
//$("p").toggle( flip++ % 2 == 0 );
});

//绑定事件处理
$("#btnT").click(function(event)
{
//取消事件冒泡
event.stopPropagation();
//设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
//切换弹出层的显示状态
$("#divPop").toggle(speed);
});

});

显示提示文字
显示段落
toggle函数测试

弹出层

这个是一个段落

这个是第二个段落

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

滑动动画和透明动画效果代码：

复制代码 代码如下:

//滑动动画效果
$("#btnShow").click(function(){
$("#divPop").slideDown("fast");
});

$("#btnHide").click(function(){
$("#divPop").slideUp("slow");
});

$("#btnT").click(function(){
$("#divPop").slideToggle("slow");
});

//透明度动画效果

$("#bShow").click(function(){
$("#divPop").fadeIn(2000);
});

$("#bHide").click(function(){
$("#divPop").fadeOut("slow");
});

//指定到透明度
$("#bHelf").click(function(){
$("#divPop").fadeTo("slow",0.3);
});

 

});

显示提示文字
隐藏提示文字
toggle函数测试


淡入
淡出
半透明

弹出层

这个是一个段落

这个是第二个段落