jQuery学习笔记(5):动画

动画

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()实现动画效果。