jQuery三组基本动画与⾃定义动画操作实例总结
⽬录
1、显⽰（show）与隐藏（hide）
1.1 show⽅法
1.2 hide⽅法
1.3 原理
2、滑⼊（sliderDown）与隐藏（sliderUp）
2.1 ⽤法
2.2 滑⼊画出切换（slideToggle）
2.3 原理
3、淡⼊（fadeIn）与淡出（fadeOut）
3.1 ⽤法
3.2 淡⼊淡出切换（fadeToggle）
3.3 淡⼊淡出到某个值（fadeTo）
4、三组基本动画总结
5、⾃定义动画（animate）
6、easing参数
7、动画队列
8、停⽌动画
8.1、stop()
8.2、判断元素是否处于动画状态
本⽂实例讲述了jQuery三组基本动画与⾃定义动画操作。分享给⼤家供⼤家参考，具体如下：
jQuery提供了三组基本动画，分别是显⽰与隐藏、淡⼊与淡出、滑⼊与画出，这三组基本动画都是标准的、有规律的的效果，jQuery还提供了⼀个⾃定义动画。
1、显⽰（show）与隐藏（hide）
显⽰(show)与隐藏(hide)是⼀组动画
1.1 show⽅法
show([speed,[easing],[callback]])
参数speed，可选，动画的执⾏时间
如果不传，就没有动画效果。
毫秒值(⽐如1000)，动画在1000毫秒执⾏完成(推荐)
固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
参数callback，可选，执⾏完动画后执⾏的回调函数，每个元素执⾏⼀次。
参数easing，可选，这⾥先不讲，后⾯统⼀讲
1.2 hide⽅法
与show⽅法的⽤法完全⼀致。
1.3 原理
show和hide修改的是元素的width、height、opacity。
2、滑⼊（sliderDown）与隐藏（sliderUp）
滑⼊(slideUp)与滑出(slideDown)是⼀组动画，效果与卷帘门类似
slideUp/slideDown，使⽤⽅法与show/hide基本⼀致。
2.1 ⽤法
slideDown([speed],[easing],[callback])
参数speed，可选，动画的执⾏时间
如果不传，默认为normal，注意区分show/hide
毫秒值(⽐如1000)，动画在1000毫秒执⾏完成(推荐)
固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
参数callback，可选，执⾏完动画后执⾏的回调函数，每个元素执⾏⼀次。
参数easing，可选，这⾥先不讲，后⾯统⼀讲
2.2 滑⼊画出切换（slideToggle）
$(selector).slideToggle(speed,callback);
如果是隐藏状态，那么执⾏slideDown操作，如果是显⽰状态，那么执⾏slideUp操作。
2.3 原理
slideDown和slideUp修改的是元素的height，通过⾼度变化（向下、向上增⼤）来动态地显⽰所有匹配的元素。
3、淡⼊（fadeIn）与淡出（fadeOut）
fadeIn/fadeOut使⽤⽅法与show/hide、slideDown/slideUp⼀致。
3.1 ⽤法
fadeIn([speed],[easing],[callback])
参数speed，可选，动画的执⾏时间
如果不传，默认为normal
毫秒值(⽐如1000)，动画在1000毫秒执⾏完成(推荐)
固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
参数callback，可选，执⾏完动画后执⾏的回调函数，每个元素执⾏⼀次。
参数easing，可选，这⾥先不讲，后⾯统⼀讲
3.2 淡⼊淡出切换（fadeToggle）
jquery框架原理
fadeToggle([speed,[easing],[callback]])
如果当前元素处于隐藏状态，那么执⾏fadeIn操作，如果处于显⽰状态，那么执⾏fadeOut操作。
3.3 淡⼊淡出到某个值（fadeTo）
fadeTo(speed,opacity,[easing],[callback]])
把所有匹配元素的不透明度以渐进⽅式调整到指定的不透明度
参数speed，必须
参数opacity，0-1之间的数值(⽐如0.4)，表⽰淡到某⼀个值。
参数callback，可选，执⾏完动画后执⾏的回调函数，每个元素执⾏⼀次。
与淡⼊淡出的区别：淡⼊淡出只能控制元素的不透明度从完全不透明到完全透明；⽽fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
fade系列⽅法：修改的是元素的opacity。
4、三组基本动画总结
1. Query给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut。
2. 动画切换⽅法：slideToggle、fadeToggle，注意：show和hide没有切换的⽅法。
3. 淡⼊淡出到某个值：fadeTo⽅法。
4. show/slideDown/fadeIn三个是显⽰效果、hide/slideUp/fadeOut三个是隐藏效果。
5. show/hide修改的是元素的height,width,opacity。slide系列⽅法修改的是元素的height。fade系列⽅法修改的是元素的
opacity。这三种⽅法修改的这些值，都是带数字的，因为带了数字才能做渐变。
5、⾃定义动画（animate）
animate(params,[speed],[easing],[callback])
参数params，必须，要执⾏动画的CSS属性，带数字
参数speed，可选，执⾏动画时长
参数easing，可选，这⾥先不讲，后⾯统⼀讲
参数callback，可选，执⾏完动画后执⾏的回调函数，每个元素执⾏⼀次。
6、easing参数
现在来说说easing参数的作⽤，这个参数是控制动画的速度样式，这个参数只有两个取值：
swing：摆钟运动，在开头和结尾移动慢，在中间移动速度快。
linear：匀速移动。
在不指定easing参数时，jQuery动画默认值是swing。
7、动画队列
在同⼀个元素上执⾏多个动画，那么对于这个动画来说，后⾯的动画会被放到动画队列中，等前⾯的动画执⾏完成了才会执⾏（联想：地铁进站）。
8、停⽌动画
要停⽌动画，可以使⽤stop()⽅法。stop(clearQueue, jumpToEnd)。
8.1、stop()
stop⽅法接受两个参数，这个两个参数都是可选的，为Boolean值：
clearQueue，是否清除动画队列；
jumpToEnd，是否跳转到动画的最终效果。
当然了，⼀般我们不需要传递参数，直接使⽤stop()。如果直接使⽤stop()⽅法，则会理解停⽌当前正在执⾏的动画，如果接下来还有动画等待进⾏，则以当前状态开始接下来的动画。
8.2、判断元素是否处于动画状态
动画积累：在使⽤animate()⽅法的时候，要避免动画积累⽽导致的动画与⽤户的⾏为不⼀致。当⽤户快速在某个元素上执⾏animate动画时，就会出现动画积累。
解决⽅法是判断元素是否处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。
if( ! $(element).is(":animate") ){  //判断元素是否正处于动画状态
//如果当前没有进⾏动画，则添加新的动画
}
更多关于jQuery相关内容还可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。