动画
jQuery内置的几种动画样式:
show / hide
直接以无参数形式调用show()
和hide()
,会显示和隐藏DOM。但是只要传递一个时间参数进去,就变成了动画。
var div = $('#test-show-hide');
div.hide(3000); //在3秒钟内逐渐消失
时间以毫秒1s = 1000ms
为单位,但也可以是'slow'
,'fast'
这些字符串:
var div = $('#test-show-hide');
div.show('slow'); //在0.6s内逐渐显示
toggle()
方法则根据房前状态决定是'slow()'
还是'hide()'
。
slideUp / slideDown
'show()
和'hide()'
是从左上角逐渐展开或收缩,slideUp()
和'slideDown'
是在垂直方向上逐渐展开或收缩。
'slideToggle()'
是根据元素是否可见来决定下一步动作。
var div = $('#test-slide');
div.slideUp(3000); //在3秒内逐渐向上消失
fadeIn / fadeOut
fadeIn()
和fadeOut
的动画效果是淡入淡出,也就是通过不断设置DOM元素的opacity
(透明)属性来实现,同样,fadeToggle()
根据元素是否可见来决定下一步动作。
var div = $('#test-fade');
div.fadeIn('slow'); //在0.6秒内淡入
自定义动画
使用animate()
可实现任意动画效果,需要传入的参数就是DOM元素最终的CSS状态和时间,jquery在时间段内不断调整CSS直到达到我们设定的值:
var div = $('test-animate');
div.animate({
opacity:0.25,
width:'256px',
height:'256px'},3000);
// 在3秒钟内CSS过渡到设定值
从'animate()'
还可以再传入一个函数,当动画结束时该函数将被调用:
var div = $('#test-animate');
div.animate({
opacity: 0.25,
width: '256px',
height: '256px'
},3000,function(){
console.log('动画已结束');
//恢复至初始状态:
$(this).css('opacity','1.0').css('width','128ps').css('height','128px');
});
串行动画
jQuery的动画效果还可以串行执行,通过delay()
方法可以实现暂停。
var div = $('#test-animates');
//动画效果:slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000).delay(1000).animate({
width:'256px',
height:'256px'},2000).delay(1000).animate({
width:'128px',
height:'128px'},2000);
有些动画在jQuery中是无法实现的,可以使用CSS3的transition()
实现动画效果。