JQuery学习笔记，四

五、动画效果

1、不使用动画效果显示和隐藏元素

主要是使用show()和hide()两个方法来实现

需要注意两点

a. JQuery主要是将display设置为none来隐藏元素的，即使包装集中的某一项已经是hide状态，它也会作为返回包装集中的内

容被返回

b. 如果显示设置了display为none，那在使用show方式时，回将display设置为block，反之，则会根据情况进行设置block或

inline

toggle()方法可以变换显示状态

2、使用动画效果显示和隐藏元素

hide(speed,callback)

speed 可以是毫秒或者预定义的slow, normal, fast

callback 当动画完成时调用的回调函数，没有参数，但是this代表运行动画的对象（元素）

show(speed,callback)

toggle(speed,callback)

3、其他的内置效果

fadeIn() 渐变进入

fadeOut() 渐变淡出

fadeOut(speed,callback)

fadeIn(speed,callback)

fadeTo(speed,opacity,callback) opacity指定其透明度，值范围是0.0-1.0

slideDown(speed,callback)

slideUp(speed,callback)

slideToggle(speed,callback)

stop()

4、定制化自己的动画

animate(properties,duration,easing,callback)

animate(properties,options)

properties JS对象类型，用于描述属性最后所要达到的值。除了设置数字值外，还可以设置字符值hide, show, or

toggle

duration 类似于之前的speed

easing

callback 类似于之前的callback

options

举个例子：

$('.animateMe').each(function(){

$(this).animate(

{

width: $(this).width() * 2,

height: $(this).height() * 2

},

2000

);

});