一、基本效果
1、show([s,[e],[fn]])
用法:
格式:$("p").show() 显示所有的段落
说明:显示隐藏的匹配元素,如果元素可见,不会改变任何东西,无论是通过hide()方法设置还是CSS中设置 display:none 该方法都有效。
2、hide([s,[e],[fn]])
用法:
格式:$("p").hide() 隐藏所有段落
说明:隐藏显示的元素
3、toggle([s,[e],[fn]])
用法:
格式: $("td").toggle() 对表格切换显示/隐藏
说明:用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的时间,如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
上面三个函数参数说明:
speed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒数值(如:1000 毫秒为单位)
easing:用来指定切换效果:默认是 "swing",可用参数 "linear"
fn:在动画完成时执行的函数,每个元素执行一次(回调函数)
二、滑动效果
1、slideDown([s],[e],[fn])
用法:
格式:$("p").slideDown() 以向下滑动方式显示隐藏 <p> 元素
说明:通过高度变化(向下增大)来动态显示所有匹配的元素,在显示完成后可选地触发一个回调函数
2、slideUp([s,[e],[fn]])
用法:
格式:$("p").slideUp() 以向上滑动方式隐藏 <p> 元素
说明:通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
3、slideToggle()
用法:
格式:$("p").slideToggle() 以滑动方式显示或隐藏 p 元素
说明:通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数
注意:这三个函数里面的参数请参照上面的参数说明。
三、淡入淡出
1、fadeIn([s],[e],[fn])
用法:
格式:$("p").fadeIn() 将 p 元素淡入
说明:通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数
2、fadeOut([s],[e],[fn])
用法:
格式:$("p").fadeOut() 将 p 元素淡出
说明:通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数
3、fadeTo([s],o,[e],[fn])
用法:
格式:$("p").fadeTo(''600",0.5) 用600毫秒缓慢的将段落的透明度调整到 0.5(半透明)
说明:把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数
opactity 参数说明:一个 0 至1 之间表示透明度的数字,0表示完全透明,1表示完全不透明,0.5表示半透明
4、fadeToggle([s],[e],[fn])
用法:
格式:$("p").fadeToggle("slow","linear") 用600毫秒缓慢的将段落淡入
说明:通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数
注意:这三个函数里面的参数请参照上面的参数说明。
四、自定义效果
1、animate(p,[s],[e],[fn])
用法:
说明:用户创建自定义动画的函数
params参数说明:一组包含作为动画属性和终值的样式属性和及其值的集合
Demo:为指定元素添加动画效果(几个不同的属性一同变化)
1 $("#block").animate({
2 "90%",
3 height: "100%",
4 fontSize: "10em",
5 borderWidth: 10
6 }, 1000 );
2、stop([c],[j])
语法:
格式: $("#box").stop() 停止当前正在运行的动画
说明:停止所有在指定元素上正在运行的动画
参数: clearQueue:如果设置为 true,则清空队列,可以立即结束动画。
jumpQueue:如果设置为 吐热,则完成队列,可以立即完成动画。
3、delay(d,[q])
语法:
格式:$("#foo").slideUp().delay(1000).fadeIn(400) 在.slideUp() 和 .fadeIn() 之间延时 800 毫秒
说明:设置一个延时来推迟执行队列中之后的项目
参数:duration:延时时间,单位:毫秒;
queueName:队列名次,默认是 Fx,动画队列
4、finish([queue])
用法:
格式:$("#box").finish() 停止当前正在运行的动画
说明:停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画
参数:queue:停止动画队列中的名称
注意:.finish()方法和.stop(true, true)很相似,.stop(true, true)将清除队列,并且目前的动画跳转到其最终值。但是,不同的是,.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
五、效果设置
1、jQuery.fx.off
用法:
格式:jQuery.fx.off = true; 立即关闭所有动画
说明:关闭页面上所有的动画,设置该属性为 true,立即关闭所有动画;设置该属性为 false,重新开启所有动画
2、jQuery.fx.interva
用法:
格式:jQuery.fx.interva = 1000
说明:设置动画的显示帧速