01第1节：jQuery动画概述

#JavaScript#在jQuery中，除了可以淡入淡出、滑动效果之外，还可以使用animate()方法创建自定义的动画效果。

对于自定义的动画函数animate()方法，可以设置一些参数、速度和回调函数，以更灵活的配置动画效果的呈现。

02第2节：animate()方法基本功能

使用jQuery的animate()方法创建自定义动画的基本语法如下：

基本语法如下：

$(selector).animate({params},speed,callback);

基本语法说明如下：

第1个参数params必须存在，用于设置能够形成动画效果的CSS属性，可见动画效果是CSS样式实现的。第2个参数speed用于配置动画效果的速度，可选参数，如果没有值，则使用默认速度呈现动画。第3个参数callback是可选的，用于指定动画完成后所执行的函数名称。现在，我们来列举个例子，如果要让一个Html元素可以移动，需要设置该元素的position属性，这是动画的基础，完整代码如下：

在此代码中，在Html元素上使用了style属性来设置一个动画效果。运行后的结果如下：

此时，页面运行后，一个DIV放在页面的最左侧，不会移动，属于静止状态，现在，我们点击“移动”按钮，看是否可以移动。

此时，我们发现，DIV块完整的从左侧向右移动一段距离，产生了动画，这就是一个简单的动画效果。

能够让我们通过jQuery的animate()方法控制CSS样式设置的动画。

03第3节：animate()方法控制多个样式动画

我们知道，animate()方法产生的动画是由CSS样式形成的，一个CSS样式是一个动画效果，那么多个CSS样式就是多个动画效果了，此时，就可以实现更丰富的动画效果。

在使用多个CSS样式属性时，要使用英文的逗号隔开即可，如下是多动画的效果代码：

注意：在jQuery的animate()方法中，要使用Camel规范来编写属性，如paddingLeft，而不是padding-left，是没有中间的横杠的。

将上面的代码运行一下，看是如何移动的？

通过效果图，你会发现，DIV块向上和向右移动了，是具有2个动画效果的。

另外，animate()方法在设置CSS属性值时，是可以使用相对值的，就是相对于原来Html元素的当前值进行相加或相减操作(+=或-=运算)。

如下一段Jquery代码，就是使用了相对值的计算：

$("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'+=150px'});});

04第4节：animate()方法使用已有的值

在jQuery中，animate()方法可以使用已经存在的值，可把CSS样式属性的动画值使用show/hide/toggle这3个值，用于配置动画的运动效果。

完整的Html+jQuery代码如下：

在此代码中，将id=div1元素的width属性值设置为toggle已有值。

运行一下效果吧：

此时的动画效果是，当单击“动画”按钮，则DIV块会以一定的速度显示和隐藏，且具有动画效果，不是生硬的隐藏和显示。

05第5节：animate()方法使用队列功能

在jQuery中，针对动画设置了队列的功能，就是可以同时编写多个动画，然后排成队，按队列的顺序一个一个的调用，从而达到连续性的动画。

使用队列的功能，可以做成像电影一样的功能，让多个画面连续性的动转，可持续一段时间，形成连续动画效果。

Html和jQuery完整代码如下：

在此代码中，设置了4个动作，执行时，jQuery会把它们放在一个队列中，按顺序执行，让这个div块形成连续的动画特效。

这是第二个特效了，再看一个：

这是最后一个，是上面所有动画的综合体现，位置在left和top都是300的位置。

06第6节：停止动画

一、不带参数

jQuery有一个stop()方法，主要功能是在动画完成前，可以停止动画的运行。也就是只要动画还没有演示完成，就可以停止，如果动画已运行完了，则无法停止。

jQuery中的淡入淡出、滑动、动画效果，都是可以使用stop()方法的。

stop()方法的基本语法如下：

$(selector).stop(stopAll,goToEnd);

stop()方法参数说明如下：

stopAll：可选参数，参数值是bool类型，可传入true或false。用于清除所有动画队列，然后可插入新的动画到队列中。goToEnd：也是可选的参数，用于指定是否立即完成当前动画，参数也是bool类型，参数值是true和false。默认情况下，stop()方法会清除在当前所选元素上指定的当前动画效果。

下面我们实战一下，使用stop()停止一下动画效果，完整的Html+jQuery代码如下：

在此代码，先使用slideDown()实现向下滑动功能，然后再使用top()停止滑动。效果如下：

上图中有2个按钮，先点击一下“开始”按钮，如下图所示：

在上图中，DIV开始从上向下滑动，动作很慢，现在再点击一下“停止”按钮，如下图所示：

在此图中，当停止之后，执行了stop()方法，DIV不再继续向下滑动了，如果再点“开始”，又会继续向下滑动。

二、带参数

jQuery的stop()方法，是可以带有参数的，可以传入bool类型的值，有2个可选参数。

下面我们来实战一下带参数的stop()方法的使用，完整代码如下：

开始停止停止所有停止但要完成

"开始" 按钮会启动动画。

"停止" 按钮会停止当前活动的动画，但允许已排队的动画向前执行。

"停止所有" 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。

"停止但要完成" 会立即完成当前活动的动画，然后停下来。

对于animate()方法的使用，大家重点是发挥CSS样式的功底，设计出复杂的动画效果，有了动画效果，才能利用animate()方法实现动画的动作，让动画更丰富多彩。

举报/反馈