jQuery特效

Posted 2020-09-18 夏冷

基础特效

方法	描述
hide()	立即隐藏jQuery对象内的所有元素
hide(time)、hide(time, easing)	在指定的时间内以动画方式隐藏jQuery对象内的所有元素，并可选一种缓动风格
hide(time, function)、hide(time, easing, function)	在指定的时间内以动画方式隐藏jQuery对象内的所有元素，并可选一种缓动风格，且指定一个回调函数在动画完成之后执行。
show()	让jQuery对象内所有元素立即可见
show(time)、show(time, easing)	指定时间内以动画方式显示出jQuery对象内的所有元素，并可选一种缓动风格
show(time, function)、show(time, easing, function)	指定时间内以动画方式显示出jQuery对象内的所有元素，并可选一种缓动风格，且指定一个回调函数在动画完成之后执行
toggle()	立即切换jQuery对象内所有元素的显示状态
toggle(time)、toggle(time, easing)	指定时间内衣动画放肆切换jQuery对象内的所有元素的显示状态，并可选一种缓动风格
toggle(time, function)、toggle(time, easing, function)	指定时间内衣动画放肆切换jQuery对象内的所有元素的显示状态，并可选一种缓动风格，且指定一个回调函数在动画完成之后执行
toggle(boolean)	单向切换jQuery对象内元素的显示状态

        当元素隐藏时，这些元素原先占据的空间就立即被旁边的元素挤占。如果希望隐藏元素并且保留原先占用的空间，使用CSS的visibility属性为hidden。

        对于css设置visibility: hidden，show()方法不起作用需要使用$().css("visibility","visiable");css设置visibility: visible,hide()起作用。

 

单向切换

        给toggle方法传一个布尔值参数，如果是true，jQuery对象中原本隐藏的元素就会显示出来(原本现实的元素不会隐藏)。如果是false，则原本显示的元素会隐藏起来。

动画持续时间参数

        可以使number十进制整数，slow（600ms）、fast（200ms），默认为normal（400ms）。当使用number时，一定不能加引号。否则参数将被忽略。

动画方式

        swing方式播放动画时，动画起始比较慢，逐渐加快，在接近动画终点时有逐渐变慢。默认值。

        linear方式播放动画比较匀速。

        所谓的动画效果就是在水平和垂直方向上减小/增加图片尺寸，并同时提高/减小透明度。

回调函数

        使用回调函数生成循环动画，如果让函数自己调用自己，很快就会耗光javascript的调用栈，从而导致脚本停止运行。解决这个问题最简单的方式是使用setTimeOut函数，$().toggle（"slow",setTimeOut(fn, 1)）实际上这个定时器避免了递归调用，根本不可能耗光JavaScript的调用栈。一定要谨慎使用finish方法。

        将函数自身回调函数设为自身方法可创建循环动画。

滑动特效

方法	描述
slideDown()、slideDown(time, function)、slideDown(time，easing，function)	让元素自上而下逐渐显示出来
slideUp()、slideUp(time, function)、slideUp(time，easing， function)	让元素自下而上逐渐消失
slideToggle()、slideToggle(time， function)、slideToggle(time，easing，function)	使用滑动特效翻转元素的显示状态

 

淡入淡出特效

       淡入淡出特效是值通过减小或者增加元素的不透明度来隐藏或者显示元素。

方法	描述
fadeOut() 、fadeOut(timespan)、fadeOut(timespan， function)、fadeOut(timespan， easing， function)	以淡出(增加透明度)的方式隐藏元素
fadeIn()、fadeIn(timespan)、fadeIn(timespan, function)、fadeIn(timespan， easing， function)	以淡入(减小透明度)的方式把元素显示出来
fadeTo(timespan, opacity)、fadeTo(timespan, opacity,  function)、fadeTo(timespan， opacity， easing， function)	增加或者减少透明度到指定大小，不会改变元素的可见性
fadeToggle()、fadeToggle(timespan)、fadeToggle(timespan, function)、fadeToggle(timespan， easing， function)	以改变透明度的方式反转元素的显示状态

定制特效

方法	描述
animation(properties)、animation(properties，time)、animation(properties，time，function)、animation(properties，time，easing， function)、	利用一个或多个CSS属性实现动画，支持可选的动画持续时间、缓动风格以及回调函数
animation(properties，options)	利用一个或多个CSS属性实现动画，使用映射对象指定各个选项

        可以使用绝对值，也可以使用相对值(如：{left："+=100"})来设置动画属性。

 

动画队列

方法	描述
queue()	返回针对jQuery对象内元素的正在执行的动画队列
queue(function)	在动画队列的末尾添加一个动画(函数)
dequeue()	从针对jQuery对象内元素的正在执行的动画队列中取出第一个动画并执行这个动画
stop()、stop(clear)、stop(clear， jumpToEnd)、finish()	停止当前动画并清理动画队列
delay(time)	在两个动画之间插入一段延时

        使用queue方法来检视动画队列中的内容，如果一个动画正在执行，他在队列中的字符串值是inprogress。如果一个动画尚未开始，那么它是队列中一个即将被调用的函数。

停止动画

        我们可以使用stop和finish方法中断正在播放的动画。

        stop支持两个可选布尔型参数，如果第一个参数值为true，就会删除队列中的所有其他动画，如果第二个参数为true，正在播放的动画会瞬间抵达动画终点(各CSS属性的目标值)。这两个参数默认都是false，也就是说只有当前正在播放的动画被从队列中删除，并且各个CSS属性的值会保持为动画被打断瞬间的值。如果没有清理动画，会跳到下一个动画，并正常执行它。

        finish类似stop方法，处理CSS属性方式不同，调用stop时，CSS属性会从当前动画一下子蹦到当前动画的终点，而是用finish方法时，所有正在参与当前动画的CSS属性以及所有队列中等待执行的动画效果都会一步执行到终点。finish方法执行时，并不能阻止新动画添加到队列，因此无法跟踪动画队列的状态，javascript调用栈很快就会耗光，为避免这种情况，增加一个变量，在触发finish事件时，设置该变量为适当的值。当需要添加新动画到队列时，先检查finishAnimation变量的值。

启用或者禁用动画特效

        $.fx.off属性设为true，从而禁用动画特效。

        如果禁用了动画特效，调用特效方法将会导致元素瞬间变换为参与动画的各CSS属性的目标值。在禁用动画的状态下，递归调用特效方法将很快耗光JavaScript的调用栈，可使用setTimeOut方法代替递归调用。