jQuery中的动画

show()方法和hide()方法

show()方法和hide()方法是jQuery中最基本的动画方法,在HTML文档里,为一个元素调用hide()方法,会将该元素的display样式改为“none”

当把元素隐藏以后,可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline"或其他除了"none"之外的值)

fadeIn()方法和fadeOut()方法

与show()方法不相同的是,fadeIn()方法和fadeOut()方法只改变元素的透明度,fadeIn()方法会在指定的一段时间内降低元素的不透明度,直至元素完全消失,fadeOut()方法则相反。

slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只会改变元素的高度。

自定义动画方法animate()

show()方法和hide()方法会同时修改元素的多个样式属性,即高度、宽度和不透明度。

在使用animate()方法之前,为了能影响该元素的“top”、“left”、“buttom”和“right”样式属性,必须先把元素的position样式设置为“relative”或者“absolute”

动画的回调函数:

css()方法并不会加入到动画队列中,而是立即执行。可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数中即可。

callback回调函数适用于jQuery所有的动画效果方法,例如slideDown()方法的回调函数:

 

停止动画和判断是否处于动画状态

停止元素的动画:stop()方法

stop()方法的语法结构为:stop([clearQueue],[gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数,为Boolean值(true或者false)。clearQueue代表是否要清空未执行完的动画队列gotoEnd代表是否直接将正在执行的动画跳转到末状态

如果使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。

stop()方法会结束当前正在进行的动画,并立即执行队列中的下一个动画。

判断元素是否处于动画状态:

在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时,就会出现动画积累。解决方法是判断元素是否正处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。

 延迟动画:在动画执行的过程中,如果想对动画进行延迟操作,那么可以使用delay()方法

delay()方法允许我们将队列中的函数延时执行

其他动画方法

①toggle()方法

toggle()方法可以切换元素的可见状态。如果元素是可见的,则切换为隐藏的,如果元素是隐藏的,则切换为可见的。

单击“标题”链接后,“内容”会在可见和隐藏两种状态之间切换。

②slideToggle()方法:slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。

单击“标题”链接后,“内容”会在可见和隐藏两种状态之间切换,不过是通过改变元素的高度来实现的。

③fadeTo()方法:fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值,这个动画只调整元素的不透明度,即匹配的元素的高度和宽度不会发生变化。

④fadeToggle()方法:fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度。

动画方法概括

动画队列:

①一组元素上的动画效果

(1)当在一个animate()方法中应用多个属性时,动画是同时发生的。

(2)当以链式的写法应用动画方法时,动画是按照顺序发生的(除非queue选项值false)。

②多组元素上的动画效果

(1)默认情况下,动画都是同时发生的。

(2)当以回调的形式应用动画方式时(包括动画的回调函数和queue()方法的回调函数),动画是按照回调顺序发生的。

css()方法要使非动画方法也按照顺序执行,需要把这些方法写在动画方法的回调函数中或者queue()方法中。

原文地址:https://www.cnblogs.com/yuanxinru321/p/6715566.html