jQuery中的动画
jQuery中的动画
show()方法和hide()方法
控制元素的显示与隐藏,可以为该方法添加参数,使得元素可以动起来。
- 可以为该方法传递一个速度关键字slow、normal、fast(600毫秒、400毫秒、200毫秒)
- 可以为该方法的显示速度指定一个数字,单位是毫秒(1000毫秒)
fadeIn()方法和fadeOut()方法
与show()方法不同的是,fadeIn()与fadeOut()方法只改变元素的不透明度。
slideDown()方法和slideUp()方法
slideDown()方法和slideUp()方法只会改变元素的高度
自定义动画方法animate()
animate(params,speed,callback);
- params:一个包含岩石属性及值的映射,比如{property1:'value1',prperty2:'value2',...}
- speed:速度参数,可选
- callback:在动画完成时的执行函数,可选
综合动画示例
$('div').mouseover(function () {
$(this).animate({
left: '+=300px',
top: '+=300px',
width: '200px',
height: '200px',
opacity: '0.3'
},2000).animate({
left: '+=300px',
top: '-=300px',
width: '100px',
height: '100px',
opacity: '1'
},2000).fadeOut('3000');
});
自定义动画方法animate()
在上例中,若想在动画完成之后为div元素添加一个边框css('border','1px solid #0f0')
。这样并不能得到预期的效果,而实际效果就是,刚开始执行动画的时候,css()的方法就执行了。其根本原因在于css()并不会加入到动画队列中,而是会立即执行。
如果想要达到预期的效果,我们需要把使用回调函数callback来对非动画方法实现排队
停止动画和判断是否处于动画状态
1.停止元素的动画
很多时候我们需要停止匹配元素正在进行的动画,此时我们需要使用stop()方法
stop([clearQueue],[gotoEnd]);
参数clearQueue与gotoEnd都是可选的,都为Boolean值。clearQueue表示立即清空为执行完的动画,gotoEnd代表是否直接将正在执行的动画跳转到末状态。
直接使用stop()方法,则会立即停止当前正在执行的动画,如果接下来还有动画等待执行,则以当前状态开始接下来的动画。
当为一个使元素绑定hover事件之后,用户把光标移入元素时会触发动画效果,而当这个动画还没结束时,用户就将光标移出了。那么改变移出时执行的动画就会被放入队列中,等待光标移入的动画结束后再执行。因此如果光标 的移入移出过快的话,就会导致动画效果与光标的动作不一致。此时只需要在光标的移入移出的动画之前加入stop()方法,就可解决。
$('div').hover(function () {
$(this).stop().animate({
width: '200px',
});
},function () {
$(this).stop().animate({
height: '50px'
});
});
可是如果遇到组合动画
$('div').hover(function () {
$(this).stop().animate({
width: '200px',
}).animate({
left: '+=300px',
});
},function () {
$(this).stop().animate({
height: '50px'
});
});
这时的stop()只会停止正在进行的动画。如果动画正在执行第一阶段(改变width)鼠标触发移出事件之后,只会停止当前的动画,并继续执行改变left的动画,而光标移出事件要等这个动画完成后才能执行。在这种情况下,我们可以设置stop()方法的第一个参数为true,此时程序会把当前元素接下来的尚未执行动画全部清空。第二个参数gotoEnd用于直接让当前动画到达结束时刻,通常用于后一个动画需要基于前一个动画的末状态的情况。
2. 判断元素释放处于动画状态
在使用animate()动画的时候,要避免动画积累导致动画与用户的行为不一致。解决办法就是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画。
及其重要,特别常用
if (!$(element).is(':animated')){ //判断元素释放处于动画状态
//如果没有处于动画状态,则添加新动画
}
3. 延迟动画
在动画执行过程中,如果想对动画进行延迟操作,可以使用delay()方法
$(this).animate({left: '400px'},3000)
.delay(1000)
.animate({top: '100px'},2000)
.delay(2000)
.animate({height: '100px'},800);
4. 其他动画方法
- toggle(speed,[callback]) 切换样式的可见状态
- sildeToggle(speed,[easing],[callback]) 通过高度的变化来切换元素的可见性
- fadeTo(speed,opacity,[callback]) 将元素的不透明度以渐进的方法调整到指定值
- fadeToggle(speed,[easing],[callback]) 通过不透明的变化来切换元素的可见性
动画队列
- 当在一个animate()方法中应用多个属性时,动画是同时发生的
- 当以链式写法应用动画方法时,动画是按顺序发生的