Jquery——Day3（动画效果）

1、显示show()、隐藏hide()
显示与隐藏类似于HTML中对应的“display:none”和“display:block”

<input type="button" class="show" value="显示" /> <input type="button" class="hide" value="隐藏" /> <input type="button" class="toggle" value="切换" /> <div id="box">box</box>

若要点击button按钮，实现“div id=box”的显示与隐藏，对应的jquery代码如下：

$('.show').click(function(){$('#box').show();});$('.hide').click(function(){$('#box').hide();});

对于两种show()、hide()交替使用，即toggle()表示切换效果

$(function(){$('.toggle').click(function(){$('#box').toggle(function(){$(this).hide();},function(){$(this).show();});});});

2、fadeIn()、fadeOut()、fadeTo()不透明度
与show()方法不同的是，fadeIn()与fadeOut()方法只改变元素的不透明度。
fadeOut会在指定的一段时间内降低元素的不透明度，直到元素完全消失（“display:none”）,fadeIn刚好相反。
若要在二者之间切换，可以使用toggle()方法

$(function(){$('.toggle').click(function(){$('#box').toggle(function(){$(this).fadeIn();},function(){$(this).fadeOut();});});});

3、slideUp()、slideDown()向上向下
这两种方法只会改变元素的高度。
当一个元素的display属性值为“none”，调用slideDown()方法时，元素将由上至下延伸显示；
对于slideUp()刚好相反。

注意：对于jQuery中的任何动画效果，都可以指定3种速度参数，即“slow”、“normal”、“fast”（时间长度分别为0.6s、0.4s、0.2s），当使用速度参数时，需要加上引号，例如“slow("slow")”；若用数字作为时间参数时，就不需要加引号，例如“show(1000)”

4、自定义动画方法animate()
在jQuery中，可以使用animate()方法来自定义动画，语法结构如下：animate(params,speed,callback)
（1）params：一个包含样式属性及值的映射，如{proprety:"value1",property2:"value2"}
（2）speed：速度参数，可选；
（3）callback：在动画完成时执行的参数，可选。
由于自定义动画一般与“position”定位（绝对或相对）一起使用

#box{width:100px;height:100px;background:#ccc;position:absolute;}.test{padding:5px;margin-right:5px;background:#a2c;float:left;display:none;}

若要用jQuery实现简单的动画效果，即需要下面代码操作：

$(function(){$('button').click(function(){$('#box').animate({left:300px},"slow");});});

5、列队动画效果
更高级一点而言，可以使用“回调函数+列队动画”

$('button').click(function(){$('#box').animate({width:'300px'},function(){$('#box').animate({height:300px},function(){$('#box').animate({left:300px});});});});

在同一元素基础上，使用连缀或顺序排列调用，可以实现队列动画。

$('.button').click(function(){$('#box').animate({width:'300px'}).animate({height:'300px'}).animate({opacity:'0.5'});});

6、动画相关方法

（1）若要停止正在运行的动画，jQuery提供了一种方法：stop()

stop([clearQueue],[gotoEnd]);

二者都为boolean值，默认值为false。

clearQueue表示是否要清空未执行的动画队列；

                gotoEnd表示十分直接将正在执行的动画跳转到末状态。

$('.stop').click(function(){$('#box').stop(true,true);});

（2）时间动画的延迟效果

在动画执行的过程中，如果想对动画进行延迟操作，可以使用delay()方法

$('.button').click(function(){$('#box').delay(1000)              .animate({left:'300px'})              .animate({botttom:'300px'}).delay(2000)              .animate({width:'300px'})              .animate({height:'300px'})});

在上述代码中，第一个、第三个会出现也延迟。

（3）animate动画效果

一般情况下，常用animate()方法判断哪个div盒子在动

<input class="button" type="button" value="按钮" /><input class="button" type="stop" value="停止" /><div id="box">box</div><div id="pox">pox</div>

 

若要使得两个div盒子同时，一个一直在动（使用递归），一个保持静止的状态，

即只对第一个盒子“div id="box"”进行操作，使用“arguments.callee”

$('#box').slideToggle('slow',function(){$(this).slideToggle('slow',arguments.callee);});

若要查找运动的动画，即需要在上述HTML代码中，添加按钮“animate”

“<input type="button" class="animate" value="查找正在运动的动画" />”

对该按钮进行jQuery解析，如下：

$('.animate').click(function(){$('div:animated').stop().css('background','red');});

7、动画全局属性

jQuery提供了两种全局设置的属性，分别为：

（1）$.fx.interval：设置每秒运行的帧数（可以调整动画每秒运行的帧数）

（2）$.fx.off：关闭页面所有的动画（默认值为false）

$.fx.interval=200;//$.fx.off=true;$('.button').click(function(){$('#box').toggle(1000);});