总结
version 1.7版本前
.stop([clearQueue][,jumpToEnd])
clearQueue: 布尔值，默认是 false;此值处理是相关的动画队列是否移除，如果为 false 时，则停止当前的动画，后面的动画按队列进行。如果为 true,则全部移除动画
jumpToEnd:布尔值，默认是 false,此值处理的是相关动画是立即完成还是按队列顺序完成，如果为 false,则按队列顺序完成，如果为 true,即立即完成完成队列的动画

version 1.7 之后
.stop([queue,][clearQueue][,jumpToEnd])
queue:是要停止的当前动画名称，其余两参数与上面的一样

例子：
.stop(): 停止当前的动画（即第一个动画队列），其余的按队列顺序执行
.stop(false, true)：停止当前的动画（即第一个动画队列），其余的动画立即完成
.stop(true, true)：停止当前的动画（即第一个动画队列），并移除其余的动画队列
.stop(false, false)与.stop() 一样
.stop(true, false)：停止当前的动画，并移除其余的动画队列

-----------------------------

jQuery的stop([clearQueue], [jumpToEnd])方法应用

停止匹配元素上正在运行的动画。

1.2 新增stop([clearQueue], [jumpToEnd])

clearQueue (Boolean) 可选参数，布尔值，表示是否同时删除队列中的动画。默认值 false。

jumpToEnd (Boolean) 可选参数，布尔值，表示是否应该立即完成当前动画。默认值 false。

1.7 新增stop([queue], [clearQueue], [jumpToEnd])

queue (String) 可选参数，队列中动画的名字，只有该动画会被停止。

clearQueue (Boolean) 可选参数，布尔值，表示是否同时删除队列中的动画。默认值 false。

jumpToEnd (Boolean) 可选参数，布尔值，表示是否应该立即完成当前动画。默认值 false。

当在元素上调用 .stop() 时，该元素上正在执行的动画（如果有的话）会立刻停止。如果正在对某一元素使用 .slideUp() 动画进行元素隐藏，那么在动画执行过程中（即元素尚未被完全隐藏时），调用 .stop() 时，该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成，所以动画完成时执行的回调函数是不会被调用的。

如果在同一元素上调用了多个动画，那么尚未被执行的动画会被放到队列中。直到前面的动画执行完，否则队列中的剩余动画是不会以被执行的。当调用了 .stop()，队列中的下一个动画会立刻被执行。如果提供了 clearQueue 参数且参数值是 true，那么队列中其它的动画会被移除，并且永远不会被执行。

如果提供了 jumpToEnd 参数且参数值是 true，那么当前正在执行的动画会立刻变成动画结束状态，即该元素上的 CSS 属性会被立刻修改成动画的目标值。拿上面提到的 .slideUp() 例子来说，这意味着元素会被立刻隐藏，如果提供了回调函数的话，那么该回调函数也会被立刻调用。

从 jQuery 1.7 开始,如果提供了 queue 参数，那么只有该参数所表示的队列中的动画才会被停止。

适用 .stop() 方法的地方是显而易见的。比如说，若要在一个元素的 mouseenter 和 mouseleave 时执行动画，首先应该立刻停止该元素上正在进行的动画。例如：

<div id="hoverme">

Hover me

<img id="hoverme" src="book.png" alt="" width="100" height="123" />

</div>

我们可以采用链式方法，在 .stop(true, true) 后添加一个漂亮的淡入淡出效果，而不会产生由于队列中含有多个动画而带来的常见问题：

$('#hoverme-stop-2').hover(function() {

$(this).find('img').stop(true, true).fadeOut();

}, function() {

$(this).find('img').stop(true, true).fadeIn();

});

切换动画（Toggling Animations）

从 jQuery 1.7 开始， 如果使用 .stop() 过早的停止了可切换的动画(toggled animation)，会触发 jQuery 内部的动画跟踪。在早先的版本中，如果在切换动画完成之前，调用了 .stop() 方法，会导致动画状态的丢失(如果 jumpToEnd 参数是 false 的话）。此时，任何后续动画将从状态 "half-way" 开始执行，有时这会导致元素消失。要想观察这种行为，请参阅下面最后一个例子。

通过将全局属性 $.fx.off 设置成 true，就可以停止所有动画，此时所有的动画元素会被设置成动画的最终状态，而不是显示一个动画。

示例:

点击 Go 按钮，立刻开始执行动画。然后点击 STOP 按钮，动画元素会在它所在的位置停下来。另外一种测试方法时，多次点击不同的动画按钮，此时尚未被执行的动画会被添加到动画队列中，而后再点击 STOP 按钮，则会立刻停止当前的动画，继续执行队列中的其它动画。

<!DOCTYPE html>

<html>

<head>

<style>div {

position: absolute;

background-color: #abc;

left: 0px;

top:30px;

width: 60px;

height: 60px;

margin: 5px;

}

</style>

<script src="jquery.min.js"></script>

</head>

<body>

<button id="go">Go</button>

<button id="stop">STOP!</button>

<button id="back">Back</button>

<div class="block"></div>

<script>

/* Start animation */

$("#go").click(function(){

$(".block").animate({left: '+=100px'}, 2000);

});

/* Stop animation when button is clicked */

$("#stop").click(function(){

$(".block").stop();

});

/* Start animation in the opposite direction */

$("#back").click(function(){

$(".block").animate({left: '-=100px'}, 2000);

});

</script>

</body>

</html>

示例:

点击 slideToggle 按钮，会开始动画。然后在动画结束前再次点击该按钮，此时，会立刻从当前位置向反方向开始动画。

<!DOCTYPE html>

<html>

<head>

<style>.block {

background-color: #abc;

border: 2px solid black;

width: 200px;

height: 80px;

margin: 10px;

}

</style>

<script src="jquery.min.js"></script>

</head>

<body>

<button id="toggle">slideToggle</button>

<div class="block"></div>

<script>

var $block = $('.block');

/* Toggle a sliding animation animation */

$('#toggle').on('click', function() {

$block.stop().slideToggle(1000);

});

</script>

</body>

</html>

====

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery test</title>
<style>
#animater{width:150px; border:1px solid #000; position:relative;}

</style>
<script src="./jquery-1.10.2.js" type="text/javascript"></script>

</head>
<body>
<h1>
<h2>动画测试效果序列</h2>
1.先向右移动到距离 800px<br />
2.字体在2s增大为 36px;<br />
3.字体在2S变大为 12px;<br />
4.字体在2s变大为 56px;<br />
5.透明度在 2S 变为 0;<br />
6.透明度在 2S 变为 1;<br />
7.在2S内，向左移动到 200px,字体大小为 16px<br />
</h1>
<div id="animater">
stop()方法测试
</div>
<div id="button">
    <input type="button" id="button1" value="stop();" />
    <input type="button" id="button2" value="stop(true);" />
    <input type="button" id="button3" value="stop(false, true);" />
    <input type="button" id="button4" value="stop(true, true);" />
    <input type="button" id="button5" value="stop(false, false);" />
</div>
<script type="text/javascript">
/*
jQuery 之 .stop(); 方法
jquery 版本是 1.10.2
作用：停止当前正在运行的动画
语法 $(selector).stop([stopAll][, goToEnd]) version 1.2
$(selector).stop([queue][,clearQueue][,jumpToEnd])

.stop(); 参数为空，即默认都为 false,点击$('#button1')则动画1停止，如果再点击 $('#button1')，则动画2也停止，再点击 $('#button1'),则画面3也停止……,如果只点击一次，则只有动画1停止，其余按正常启动。

.stop(true); 则全部动画停止

.stop(false, true); 动画1立即完成，其余按正常启动

.stop(true, true); 动画1立即完成，其余动画停止工作

.stop(false, false) 与 .stop() 效果一样

*/

/*
    $('#animater').animate({'right': -800}, 3000)
            .animate({'font-size': '36px'}, 2000)
            .animate({'font-size': '12px'}, 2000)
            .animate({'font-size': '56px'}, 2000)
            .animate({'opacity': 0}, 2000)
            .animate({'opacity': 1}, 2000)
            .animate({'left': 200, 'font-size': '16px'}, 2000);
*/

$(document).ready(function(){

$('#button1').click(function(){
        $('#animater').stop();
    });

$('#button2').click(function(){
        $('#animater').stop(true);
    });

$('#button3').click(function(){
        $('#animater').stop(false, true);
    });

$('#button4').click(function(){
        $('#animater').stop(true, true);
    });

$('#button5').click(function(){
        $('#animater').stop(false, false);
    });

});
</script>
</body>
</html>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
官网的说法(自个翻译):
当 .stop() 被应用于一个元素时，正在运行的动画（如果有的话）会立即停止，例如，有一个元素正在发生 .slideUp() 隐藏时，此时当 .stop() 被触发，则这个元素还是没有被隐藏，但是高度比之前要小，后面回调的则不起作用。
示例如下：

$('#animater').animate({'right': -800}, 3000, function(){
    alert("hi, lin3615");
})；
    $('#button1').click(function(){
        $('#animater').stop();
    });
    则，后面的回调函数不起作用
---------------------------
如多于一个动画被用于一个元素时，这些动画会按照排列顺序依次先后被执行，当 .stop() 被调用时，后面的一个动画会立即被执行，如果在 clearQueue 参数为 true,则剩下的动画会被移除，不会执行。
--------------------
如果 jumpToEnd 参数为 true,则当前的快速被执行，但是元素会立即执行完成
---------------------------
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

jQuery 之 .stop() 方法的更多相关文章

  1. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  2. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  3. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  4. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  5. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  6. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  7. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  8. [转]jQuery的each方法的几种常用的用法

    下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下:  var arr = [ "one", "two", "three&quo ...

  9. jquery中$.ajax方法提交表单

    function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

  10. JS,JQuery的扩展方法

    转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            ...

随机推荐

  1. 【开发工具 - Git】之Git使用案例

    本帖主要介绍一下Git在实际项目开发中的使用流程,包括克隆.暂存.提交.推送.拉取.分支.冲突解决等,暂时还不包括回退. 1.首先需要安装Git,下一步下一步就行,这里就不说了.值得一提的是,如果Gi ...

  2. DDD的好文章

    http://www.jdon.com/44815   //cqrs 架构 http://www.jdon.com/tags/272 解道领域驱动专题

  3. 使用viewpager实现广告条轮询的效果

    先上效果图: viewpager是google在v4-support包中提供的,使用时与listview类似,度需要提供一个adapter, 只不过viewpager提供的是PagerAdapter ...

  4. iphone4s 关于大于400M的视频无法拷贝的问题

    方法有二: 1.可以用win7等高版本的系统拷出 2.可以用Itools工具导出

  5. 嵌入式Linux-GNU Make 使用手册（中译版）

    GNU Make 使用手册(中译版) 翻译:于凤昌 译者注:本人在阅读Linux源代码过程中发现如果要全面了解Linux的结构.理解Linux的编程总体设计及思想必须首先全部读通Linux源代码中各级 ...

  6. Winform之跨线程访问控件(在进度条上显示字体)

    此文章对于遇到必须使用线程但是没有办法在线程内操作控件的问题的处理  有很好的解决方案(个人认为的.有更好的方案欢迎交流.) 在做跨线程访问之前我们先了解下我们所做的需要达到的效果: 这个是批量的将x ...

  7. 使用DrawerLayout实现QQ5.0侧拉菜单效果

    在上一篇文章中,我们介绍了怎么使用DrawerLayout来实现一个简单的侧拉菜单(使用DrawerLayout实现侧拉菜单),也就是我们常说的抽屉效果,GitHub上类似效果的实现方式非常多,实现出 ...

  8. C# Obsolete

    Obsolete 属性将某个程序实体标记为一个建议不再使用的实体.每次使用被标记为已过时的实体时,随后将生成警告或错误,这取决于属性是如何配置的 如果把false 改成 true 的话那么GetNam ...

  9. HDU-1034(简单模拟)

    Candy Sharing Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  10. 18、HTML

    HTML 超文本标记语言(Hyper Text Markup Language). 用来描述网页的一种语言. HTML标签 由尖括号包围的关键词. 如:<html> 通常是成对出现的,开始 ...