js进阶 13 jquery动画函数有哪些

js进阶 13 jquery动画函数有哪些

打赏

目录

• 一、总结
  • 一句话总结：
• 二、jquery动画函数有哪些
  • 显示和隐藏
  • 滑动
  • 淡入淡出
  • 自定义动画

 

回到顶部

一、总结

一句话总结：

 

 

回到顶部

二、jquery动画函数有哪些

原生JavaScript编写动画效果代码比较复杂，而且还需要考虑兼容性。通过jQuery，我们使用简单几句代码，即可轻松实现各种动画效果。
之前我们讲过使用CSS3实现动画，它比使用jQuery实现动画效果更加简单，不过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