jQuery学习心得 ①

使用基本动画实现弹出层的特效

$(document).ready(function(){

　　　var speed = 500;
　　　
　　　//点击按钮显示
　　　$("#button").click({
　　　　　　var offset = $(event.target).offset();//offset():返回第一个匹配元素的偏移坐标,这里指event.target
　　　　　　$("#box").css({ top: offset.top + (event.target).height(),left: offset.left });
　　　　　　$("#box").show(speed);
　　})

　　//点击本身关闭
　　　$("#box").click(function(){$(event.target).hide(speed)});
})

基本动画函数：

　　show(speed)　　//默认显示动画透明度，大小

　　hide(speed)　　//默认隐藏动画透明度，大小

　　Toggle(speed)　　//切换元素的可见状态 show() or hide()

滑动动画函数：

　　slideDown(speed)　　//通过高度变大(向下滑动)动态的显示元素

　　slideUp(speed)　　//通过减小高度(向上滑动)隐藏元素

　　slideToggle(speed)　　//跟Toggle一样，切换元素的可见状态

淡入淡出动画函数：

　　fadeIn(speed)　　//淡入元素

　　fadeOut(speed)　　//淡出元素

　　fadeTo(speed,opacity)　　//自定义元素的透明度，opactiy参数取值0-1，即0.5对应50%透明度

　　其实下面两个函数跟基本函数用法都差不多，值得注意的是fadeTo只改变元素的透明度，不改变元素的display属性，这意味着就算透明度为0元素任然会存在（占位），而fadeIn,fadeOut函数则不同，最后一定会改变display属性。

　　fadeTo可以与fadeIn配合使用，比如说默认情况下，fadeIn最后会完全显示：

　　　　　　　　　　

 　　但是先设置fadeTo的话：

 

$("#box").fadeTo(0,0.5)
$("#box").fadeIn("slow") 

　　　　　　　　　　

　　就会最终以fadeTo设置的数值显示,这里介绍的仅仅是两个函数的特性, 实际应用中并不一定要两者配合使用.