发布于：特效 (Effects)

使用 .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() 动画与颜色相关的属性。可以通过包含 颜色插件 轻松实现颜色动画。我们将在本书后面讨论插件的使用。

link 缓动

定义：缓动描述了效果发生的方式——变化率是稳定的，还是在动画持续时间内变化的。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 上的动画文档。