Jquery——Day3（动画效果）

向右看齐 2022-07-12 13:40 364阅读 0赞

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

若要点击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盒子在动

若要使得两个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提供了两种全局设置的属性，分别为：