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”
“”
对该按钮进行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); });
男娘i
「爱情、让人受尽委屈。」
亦凉
向右看齐
刺骨的言语ヽ痛彻心扉
还没有评论，来说两句吧...