jQuery — 动画/效果

一、基本效果

  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

说明:设置动画的显示帧速

原文地址:https://www.cnblogs.com/niujifei/p/12398070.html