JavaScript实现动画原理: 我们只需要以固定的时间间隔(例如,0.1秒),每次把DOM元素的CSS样式修改一点(例如,高宽各增加10%),看起来就像动画了。

用js 手动实现动画效果,需要编写非常复杂的代码. 如果要把动画用函数封装起来就更麻烦了. 用jquery实现动画: 只需一行代码.不能再简单了….

show/hide

直接以无参数形式调用show()和hide(),会显示和隐藏DOM元素。
但是,只要传递一个时间参数进去,就变成了动画:

var div = $('#test-show-hide');
div.hide(3000); // 在3秒钟内逐渐消失

时间以毫秒为单位,但也可以是’slow’,’fast’这些字符串: var div = $(‘#test-show-hide’); div.show(‘slow’); // 在0.6秒钟内逐渐显示

toggle()方法则根据当前状态决定是show()还是hide()。

也就是 隐藏时候点击就显示, 显示时候点击就隐藏

slideUp / slideDown

show()和hide()是从左上角逐渐展开或收缩的, 而slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的。

slideUp()把一个可见的DOM元素收起来,效果跟拉上窗帘似的, slideDown()相反,而slideToggle()则根据元素是否可见来决定下一步动作:

fadeIn / fadeOut

fadeIn()和fadeOut()的动画效果是淡入淡出,也就是通过不断设置DOM元素的opacity属性来实现,而fadeToggle()则根据元素是否可见来决定下一步动作: var div = $(‘#test-fade’); div.fadeOut(‘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', '128px').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);
}
</script>