使用$.fn.animate自定义效果
Prev Chapter 6. Effects 特效 Next

使用$.fn.animate自定义效果

jQuery 使得通过$.fn.animate方法设置CSS属性控制动画成为可能。 $.fn.animate 这个方法允许你设置一个值,或者使用默认值。

Example 6.6. 使用$.fn.animate自定义效果

          $('div.funtimes').animate(
          {
          left : "+=50",
          opacity : 0.25
          },
          300, // 持续时间
          function() { console.log('done!'); // 回调
          });

Note

颜色相关的属性是不能通过$.fn.animate用在jQuery以外的。color plugin可以很轻松完成颜色动画。我们将在书的后面章节讨论如何使用此插件。

Easing

[Definition: Easing Easing描述:出现在其中一个效果 - 无论是变化或是稳定的,或动画进行中在不同点位的速度。 ]jQuery包括两个easing缓冲方法:"linear" 和 "swing"。如果你想在你的动画更加自然的过渡,各种easing插件就可以用上。

在jQuery 1.4 版本中,我们使用$.fn.animate方法能容易的设置 per-property 。

Example 6.7. easing属性

$('div.funtimes').animate(
    {
        left : [ "+=50", "swing ],
        opacity : [ 0.25, "linear" ]
    },
    300
);

关于easing选项的更多细节,请参见 http://api.jquery.com/animate/.


Copyright Rebecca Murphey, released under the Creative Commons Attribution-Share Alike 3.0 United States license.


Prev Up Next
基本特效 Home 管理效果