发布在：效果

使用 .animate() 创建自定义效果

jQuery 可以通过 .animate() 方法对任意 CSS 属性进行动画处理。.animate() 方法允许你对一个设定值或相对于当前值的一个值进行动画处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// Custom effects with .animate()
$( "div.funtimes" ).animate(
    {
        left: "+=50",
        opacity: 0.25
    },
 
    // Duration
    300,
 
    // Callback to invoke when the animation is finished
    function() {
        console.log( "done!" );
    }
);

注意：使用开箱即用的 jQuery，无法使用 .animate() 对颜色相关的属性进行动画处理。可以通过包含 颜色插件 来轻松完成颜色动画。我们将在本书后面讨论如何使用插件。

链接 缓动

定义：缓动描述了效果发生的样式——变化率是稳定的，还是在动画持续时间内有所变化。jQuery 仅包含两种缓动方法：swing 和 linear。如果你想在动画中获得更自然的过渡，可以使用各种缓动插件。

从 jQuery 1.4 开始，在使用 .animate() 方法时，可以对每个属性进行缓动。

1
2
3
4
5
 
// Per-property easing
$( "div.funtimes" ).animate({
    left: [ "+=50", "swing" ],
    opacity: [ 0.25, "linear" ]
}, 300 );

有关缓动选项的更多详细信息，请参阅 api.jquery.com 上的动画文档。