软件开发培训班 >> 编程开发 >> JavaScript


jquery缓动swing liner控制动画过程不同时刻的速度

　　本文标签：jquery缓动,动画过程

jQuery效果函数(slideUp()、fadeIn()等)和animation()函数都接收另一个用来控制动画过程的速度的参数，这就是缓动(easing)，它确定了动画过程不同时刻的速度 。例如，将一个元素移过页面的时候，可能让这个元素缓慢地开始移动，然后变得很快，最后随着动画的完成再次慢下来 。给动画添加缓动，使得动画在视觉上更有趣且更有动态感 。

jQuery只包含了两个缓动方法：swing和linear 。linear方法提供了一个稳定的动画，以使得动画的每个步骤都是相同的(例如，如果要让一个元素以逐渐变化的方式穿过屏幕，每一步的距离和前一步都是相同的) 。swing要更加动态一些，随着动画的开始变得更加快一些，然后再慢下来 。swing是一个常用设置，因此，如果没有指定任何缓动，jQuery会使用swing方法 。

对于任何jQuery效果来说，缓动方法是其第二个参数，因此，要使用linear方法将一个元素滑出视线，可以这样编写代码：
复制代码 代码如下:

$(#element). slideUp(1000，linear)；

当使用animate()函数的时候，缓动方法是第三个参数，第一个参数是一个对象直接量，包含了我们想要实现动画的CSS属性；第二个参数是动画的整体速度 。例如，要对动画代码使用linear缓动方法，可以像下面这样编写代码：
复制代码 代码如下:

$(#message).animate(
{
left：650px，
opacity：.5，
fontSize：24px
}，
1500，
linear
)；

然而，并不仅限于使用jQuery所提供的两个缓动方法 。使用jQuery插件可以添加一系列的其他的缓动方法 。