1. stop 文档

$(selector).stop(stopAll,goToEnd)

stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

2. 案例代码

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>stop的用法案例</title>

  <style type="text/css">

    *{

      margin: 0;

      padding: 0;

      cursor: pointer;

    }

    #start{

      margin: 20px auto;

      width: 500px;

      height: 50px;

      line-height: 50px;

      text-align: center;

      border: 1px solid red;

    }

    .button{

      margin: 0 auto;

      width: 1000px;

      overflow: hidden;

      height: 300px;

      border: 1px solid red;

    }

    .button div{

      float: left;

      margin-left: 20px;

      width: 200px;

      height: 50px;

      line-height: 50px;

      border: 1px solid red;

      text-align: center;

    }

    #box {

      position: relative;

      margin: 20px auto;

      width: 100px;

      height: 100px;

      background: #98bf21;

    }

  </style>

</head>

<body>

  <p id="start">start</p>

  <div class="button">

    <div  id="button1" >stop() <br /> stop(false,false)</div>

    <div  id="button2" >stop(true) <br /> stop(true,false)</div>

    <div  id="button3" >stop(false,true)</div>

    <div  id="button4" >stop(true,true)</div>

  </div>

  <div id="box"></div>

  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

  <script type="text/javascript">

    $(function () {

      function boxMes(ele){

        ele.html('width:'+ele.width()+'<br />'+'height:'+ele.height());

      }

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

        $("#box").stop(true,true).css({

          width: 100,

          height: 100

        });

        $('#box').html('还原宽高100*100');

        $("#box").animate({

          width: 300,

          height: 300

        }, 5000,function(){

          boxMes($('#box'));

        });

        $("#box").animate({

          width: 100,

          height:100

        }, 5000,function(){

          boxMes($('#box'));

        });        

      });

      $('#button1').click(function () {

        $('#box').stop();

        boxMes($('#box'));

      });

      $('#button2').click(function () {

        $('#box').stop(true);

        boxMes($('#box'));

      });

      $('#button3').click(function () {

        $('#box').stop(false, true);

        boxMes($('#box'));

      });

      $('#button4').click(function () {

        $('#box').stop(true, true);

        boxMes($('#box'));

      });

    })

  </script>

</body>

</html>

3. 总结

stop 用于阻止当前动画执行及后续动画处理（当前动画必然终止，其最终状态及绑定上的后续动画是否执行取决于两个配置组合），默认配置参数为  stop(false,false)    等同于 stop()

stop(false,false) / stop() 阻止当前动画的后续执行，同时后续动画以当前状态为初始状态 正常执行
stop(true,false) / stop(true) 阻止当前动画的后续执行，同时后续动画也不再执行，状态维持在此刻。

stop(false,true) 阻止当前动画的渐变执行（即一步执行到位），后，以当前动画的结尾状态为初始状态执行后续动画。
stop(true,true) 阻止当前动画的渐变执行（即一步执行到位），后，状态维持在此刻。

stop 用法的更多相关文章

  1. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  2. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  3. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  4. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  5. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  6. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  7. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  8. chattr用法

    [root@localhost tmp]# umask 0022 一.chattr用法 1.创建空文件attrtest,然后删除,提示无法删除,因为有隐藏文件 [root@localhost tmp] ...

  9. 萌新笔记——vim命令“=”、“d”、“y”的用法（结合光标移动命令，一些场合会非常方便）

    vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...

  10. [转]thinkphp 模板显示display和assign的用法

    thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...

随机推荐

  1. JavaScript笔记 #06# Promise简单例子

    索引 回调版本 Promise版本1 Promise版本2 Notes 参考资料: Promise JavaScript Promise:简介 你去书店借书,按照异步的套路,剧情如下↓ 你:“老板,有 ...

  2. IntelliJ IDEA. Debug模式

    资料收集: https://www.bilibili.com/video/av6749471/?p=16 eclipse debug模式. 基础 Intellij Idea--Debug使用 Inte ...

  3. pytorch种, 一维Conv1d, 二维Conv2d

    pytorch之nn.Conv1d详解 之前学习pytorch用于文本分类的时候,用到了一维卷积,花了点时间了解其中的原理,看网上也没有详细解释的博客,所以就记录一下. Conv1dclass tor ...

  4. mysql5.5被django抛弃,安装mysql5.7记录

    安装: https://www.jb51.net/article/123004.htm 问题解决: https://blog.csdn.net/zztingfeng/article/details/8 ...

  5. Python3 Pandas的DataFrame格式数据写入excle文件、json、html、剪贴板、数据库

    Python3 Pandas的DataFrame格式数据写入excle文件.json.html.剪贴板.数据库 一.DataFrame格式数据 Pandas是Python下一个开源数据分析的库,它提供 ...

  6. sql存储过程算法

    MSSQL执行 : exec proc_NAME ORACLE : beginproc_NAME;commit;end; 1.求素数 MSSQL; CREATE proc [dbo].[EXEC003 ...

  7. linux 实时显示网速bash

    执行方法先授权再运行 chmod +x shi.sh脚本+网卡名称 ./shi.sh ens33 #!/bin/bash while [ "1" ] do eth=$1 RXpre ...

  8. 零基础Python爬虫实现(爬取最新电影排行)

    提示:本学习来自Ehco前辈的文章, 经过实现得出的笔记. 目标网站 http://dianying.2345.com/top/ 网站结构 要爬的部分,在ul标签下(包括li标签), 大致来说迭代li ...

  9. python简说（十五）MD5加密

    def my_md5(s): news = str(s).encode() m = hashlib.md5(news) return m.hexdigest()

  10. NOIP 2016 天天爱跑步 (luogu 1600 & uoj 261) - 线段树

    题目传送门 传送点I 传送点II 题目大意 (此题目不需要大意,我认为它已经很简洁了) 显然线段树合并(我也不知道哪来这么多显然) 考虑将每条路径拆成两条路径 s -> lca 和 t -> ...