【jQuery】动画

显示和隐藏

    控制元素的的显示和隐藏是最基本的动画技术。

  • show()显示被选的元素

    语法:$(selector).show([speed,[easing],[fn]])

  • hide()隐藏被选的元素

    语法:$(selector).hide([speed,[easing],[fn]])

  • toggle()对被选元素进行隐藏和显示的切换

    语法:$(selector).toggle(speed,callback,switch

  • 参数说明:

    1.speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如:1000

    2. easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"

    3. fn:在动画完成执行的函数,每个元素执行一次。

滑动

    滑动效果也是比较常见的动画效果,比如我们常见的具有滑动效果的下拉菜单

  • slideDown():通过调整高度来滑动显示被选元素

    语法:$(selector).slideDown([speed],[easing],[fn])

  • slideUp():通过调整高度来滑动隐藏被选元素

    语法:$(selector),slideUp[speed,[easing],[fn]])

  • slideToggle()通过高度变化来切换所有匹配元素的可见性。

    语法:$(selector).slideToggle([speed],[easing],[fn])

  • 参数说明:

    1.speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如:1000)

    2. easing:(Optional)用来指定切换效果, 默认是"swing",可用参数"linear""

    3. fn:在动画完成时执行的函数,每个元素执行一次。

淡入淡出

    淡入和淡出效果,本质上其实都是通过改变元素的"透明度"(opacity属性)来实现的。

  • fadeIn()和fadeOut():可以使用fadeIn()方法来实现元素的淡入效果,使用fadeOut()方法来实现元素的淡出效果。

    语法:fadeIn([speed],[easing],[fn])/fadeOut([speed],[easing],[fn])

  • fadeToggle()通过不透明度的变化来开关所有匹配元素的淡入和淡出效果。

    语法:fadeToggle([speed,[easing],[fn]])

  • fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

    语法:fadeTo([[speed],opacity,[easing],[fn]])

自定义动画

    jQuery动画是通过将元素的某一个属性从"一个属性值"在指定时间内平滑地过渡到"另外一个属性值"来实现,原理跟CSS3动画原理是一样的。

  • animate()方法执行CSS属性集的自定义动画。

    语法:animate(params,[speed],[easing],[fn])

    参数:params:一组包含作为动画属性和终值的样式属性和及其值的

    集合注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left

  • stop()方法停止当前正在运行的动画。

    语法:$(selector),stop(stopA11,goToEnd)

    参数:stopA11 可选。规定是否停止被选元素的所有加入队列的动画。

    goToEnd可选。规定是否允许完成当前的动画。该参数只能在设置了stopA11参数时使用。

  • finish()停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。

    inish()方法和stop(true,true)很相似,stop(true,true)将清除队列,并且目前的动画跳转到其最终值。但是,不同的是,finish()会导致所有排队的动画的CSS属性跳转到他们的最终值。

  • delat()将队列中下一个动画延迟指定的时间后执行。
  • jQuery.fx.off关闭页面上所有的动画。
  • jQuery.fx.interval设置动画的显示帧速。默认值为13
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注