JQuery中stop方法的使用

在前台页面开发中有时候我们会需要一些比较酷的效果，这个时候使用jquery中的动画来实现便显得非常的简单。

最近在工作中碰到了一个页面元素移动的效果，这是个简单的页面效果也非常容易实现。

在使用中用到了一个停止动画的方法"stop()"，以前只是用也没有过多的关注。

这几天再次碰到，便翻开文档测试了一番，竟也有了一些新的认识。对这个方法有了全新的了解，在这里把我的测试记录下来。

在JQuery文档中对这个方法的解释是这样的： 

一、概述

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行。

二、没有参数

场景模拟

假设有一个元素需要在背景中进行移动，然后回到起始位置。页面中有三个按钮，分别负责“开始移动”，“采用了stop方法的回归”，“没有采用stop方法的回归”。

整体页面效果图如下：

测试代码和效果

 1 

View Code

通过测试我们不难发现

有stop，当蓝色方块在向右侧移动的时候，点击按钮，方块会立即往回返（向左侧移动）。

没有stop，当蓝色方块在向右侧移动的时候，点击按钮，方块会等到完全移动到指定位置后才往回返（向左侧移动）。

测试总结

stop()停止了当前正在执行的动画，并使后续的动画立即得到了执行。

 三、两个参数或者一个参数

查看文档可以知道这个时候参数依次为：[clearQueue],[gotoEnd]  并且都为可选，类型都为Boolean。

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

起航点卡销售系统

欢迎使用“起航点卡销售系统”销售程序：一、系统优势 1、售卡系统采取了会员与非会员相结合的销售方法，客户无需注册即可购卡，亦可注册会员购卡。 2、购卡速度快，整个购卡或过程只需二步即可取卡，让客户感受超快的取卡方式！ 3、批量加卡功能。 4、取卡方式：网上支付，即时取卡 ，30秒可完成交易。 5、加密方式：MD5 32位不可倒推加密 6、防止跨站

下载

我们可以挨个进行测试。代码如下：

 1 29     

View Code

 1  2      3          4              5              6              7              8              9             10         11         12             14             15             18         19         20             22             23             24             26             27             28         29         30             33             34             35             38             39             40         41         42             43             44             45             46             47             48          
49 50     
方法
参数
说明
方法
参数
说明
13                 
清空队列，当前执行动作立即停止。后续动作会不再执行。16                 等同于：stop(false,false)17             
21                 
[clearQueue]
清空队列，当前执行动作立即停止。后续动作会不再执行。
25                 
[clearQueue]
不清空队列，当前执行动作立即停止。后续动作会立即执行。
31                 32             
[clearQueue],[gotoEnd]
清空队列，当前执行动作立即完成。后续动作会不再执行。
36                 37             
[clearQueue],[gotoEnd]
不清空队列，当前执行动作立即完成。后续动作会立即执行。
[clearQueue],[gotoEnd]
清空队列，当前执行动作立即停止。后续动作会不再执行。
[clearQueue],[gotoEnd]
不清空队列，当前执行动作立即停止。后续动作会立即执行。
 
51     
52         
53     
54 

View Code

我们可以看到如下整理结果

四、笔记

在jQuery的较高版本中stop还有一种用法，就是和队列（queue）配合使用。对于这种用法，我目前还不是还不是属性，这里无法给出一个好的解释。

留待以后在慢慢研究了。

目前stop的用法相信也足够我们只用了。