自定义动画

如果上述动画效果还不能满足你的要求，那就祭出最后大招： 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');

});

实际上这个回调函数参数对于基本动画也是适用的。

有了 animate() ，你就可以实现各种自定义动画效果了：