About jQuery animation
关于jQuery动画API
jQuery 主要的动画控制API
1 .show()
2 .hide()
3 .slideUp
4 .slideDown
5 .slideToggle
6 .fadeIn
7 .fadeOut
8 .animate
如上函数如何使用?演示使用方式
.hide()
.hide([duration ] [,easing ] [,complete ])
用于隐藏元素,没有参数的时候等同于直接设置display属性,当我们给hide设置事件时:hide(2000)会有一个消失的过程
示例:
1 | <style> |
.show()
.show( [duration ] [, easing ] [, complete ] )
用于显示元素,用法和hide类似给显示元素设置一个现实的时间
1 | $('div').hide(2000) // 隐藏时间为2s |
.slideUp
.slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑上去,当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。
效果:(代码基于hide)
1 | $('div').slideUp() |
.slideDown
用滑动动画显示一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式
效果:(代码基于slideUp)
.slideToggle
用滑动动画显示或隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面中,在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值。
如果一个元素的display属性值为inline,然后是隐藏和显示,这个元素将再次显示inline。当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。
效果:
连续调用两次,和使用.slideUp()、.slideDown效果相同
.fadeIn
.fadeIn( [duration ] [, easing ] [, complete ] )
通过淡入的方式显示匹配元素,参数含义和上面相同
给div的css属性设置display:none
$(‘div’).fadeIn(2000)
.fadeOut
.fadeOut( [duration ] [, easing ] [, complete ] )
通过淡出的方式隐藏匹配元素
取消div的css中的display:none
上面几个简单的动画不能满足需求的时候,jquery提供了自定义动画行为的方法
.animate
.animate( properties [, duration ] [, easing ] [, complete ] )
1 | <div id="clickme"> |
1 | $( "#clickme" ).click(function() { |
height属性的目标值是’toggle’。由于之前图像是可见的,因此动画会将高度缩小为0以隐藏它。第二次点击然后反转此转换
jQuery动画队列
jQuery提供了以下几种方法来操作动画队列。
stop([clearQuery],[gotoEnd]):停止当前jQuery对象里每个DOM元素上正在执行的动画。
queue([queueName,]callback):将callback动画数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。
queue([queueName,]naeQueue):用newQueue动画函数队列代替当前jQuery对象里所的DOM元素的动画函数队列。
dequeue():执行动画函数队列头的第一个动画函数,并将该动画函数移出队列。
clearQueue([queueName]):清空动画函数队列中的所有动画函数。可选的 callback 参数是动画完成后所执行的函数名称。
例子:
1 | <style> |