读jquery 权威指南[3]-动画

一、显示与隐藏——hide(),show()

1. 方法：

hide(speed,[callback]);
show(speed,[callback]);

说明：这两个方法还可以实现带动画效果的显示隐藏。speed可以是“slow"(600毫秒)、"normal"(400毫秒)、"fast"(200毫秒)，可以直接是毫秒数。

callback是动画执行完的回调函数。

2.实例：

html

<script type="text/javascript">$(function () {var $link = $(".artList a");var $hide = $(".artList :eq(2)");$link.click(function () {if ($(this).html() == "显示") {$(this).html("隐藏");$hide.show(1000,function(){alert("显示")});} else {$(this).html("显示");$hide.hide(800, function () { alert("隐藏")});}})});</script>

二、切换显示隐藏——toggle()

1. 方法

toggle()：无参数，直接切换显示隐藏状态；
toggle(switch)：switch是布尔值，true显示元素，false隐藏元素。
toggle(speed,[callback]):speed为切换速度；callback为动画效果执行之后的回调函数。

说明：当以动画效果展示时，元素的width,height,padding,margin都以动画形式展示。

2. 实例：

html

<script type="text/javascript">var isShow = false;var title = $(".divTitle");var content = $(".divContent");$(function () {title.click(function () {if (isShow) {$("img").slideUp("normal", function () {$("#divTip").html("关闭成功");isShow = false;});} else {$("img").slideDown("normal");$("#divTip").html("");isShow = true;}});});</script>

三、滑动效果——slide

slideUp(speed,[callback]):向上滑动，减小元素高度至0
slideDow(speed,[callback]):向下滑动，增大元素高度。
slideToggle(speed,[callback]):以动画效果切换元素高度。

四、淡入淡出——fade

1. 淡入淡出方法

fadeIn(speed,[callback]):淡入，透明度由0.0到1.0；
fadeOut(speed,[callback]):淡出，透明度由1.0到0.0；

实例：

html

<script type="text/javascript">$(function () {$img = $("img"); //图片元素对象$tip = $(".divTip"); //提示元素对象$("#Button1").click(function () { //第一个按钮单击事件$tip.html(""); //清空提示内容//在2000毫秒中淡入图片，并执行一个回调函数$img.fadeIn(2000, function () {$tip.html("淡入成功！");})})$("#Button2").click(function () { //第二个按钮单击事件$tip.html(""); //清空提示内容//在2000毫秒中淡出图片，并执行一个回调函数$img.fadeOut(2000, function () {$tip.html("淡出成功！");})})})</script>

2. fadeTo(speed,opacity,[callback])：以动画效果将透明度设置为一个指定值，还可以设置回调函数。

实例：

html

<script type="text/javascript">$(function () {var opacity = 0.0;$("#btn").click(function () {if (opacity >= 1.0) {opacity = 0.0;} else {opacity += opacity + 0.2;}$("img").fadeTo("normal", opacity);});});</script>

五、自定义动画——animate

1.方法：

animate(params,[duration],[easing],[callback])

说明：param表示要调整的属性键值对，duration表示速度，easing表示动画插件，callback表示动画效果完成后的回调效果。

注意：

params的属性名要使用骆驼写法，例如font-size要写成fontSize。

如果想以动画形式移动元素位置，则position必须设置为relative或者absolute。

队列动画：在元素中执行一个或者多个animate方法。

本文转自陈敬（Cathy）博客园博客，原文链接：http://www.cnblogs.com/janes/p/3533706.html，如需转载请自行联系原作者