js进阶 13 jquery动画函数有哪些
js进阶 13 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
