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. Python cv2 OpenCV 中传统图片格式与 base64 转换

    Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,是一种基于64个可打印字符来表示二进制数据的方法.通过http传输图片常常将图片数据转换成base64之后再进行传输. Base64简 ...

  2. Python文件读写、StringIO和BytesIO

    1 IO的含义 在计算机中,IO是Input/Output的简写,也就是输入和输出. 由于程序和运行时数据是在内存中驻留,由CPU这个超快的计算核心来执行,涉及到数据交换的地方,通常是磁盘.网络等,就 ...

  3. Fiddler（一）Fiddler介绍及应用场景

    Fiddler是一款网络抓包工具,抓包可以是抓取电脑端请求的数据,还可以抓取移动端(手机APP)的数据包,可以监控HTTP和HTTPS的流量,可以通过浏览器或者客户端软件向服务器发送的HTTP或者HT ...

  4. 【题解】 Luogu P4312 / SP4155 [COCI 2009] OTOCI / 极地旅行社

    原题地址:P4312 [COCI 2009] OTOCI / 极地旅行社/SP4155 OTOCI - OTOCI lct入门难度的题,十分弱智(小蒟蒻说lct是什么,能吃吗?) bridge操作判联 ...

  5. 嵌入式 Linux 对内存的直接读写（devmem）

    https://blog.csdn.net/xy010902100449/article/details/47028497[摘要] 在Linux开发中着实用到的调试工具并不是很多.devmem的方式是 ...

  6. bzoj 1419 Red is good - 动态规划 - 概率与期望

    Description 桌面上有R张红牌和B张黑牌,随机打乱顺序后放在桌面上,开始一张一张地翻牌,翻到红牌得到1美元,黑牌则付出1美元.可以随时停止翻牌,在最优策略下平均能得到多少钱. Input 一 ...

  7. Codeforces Round #425 (Div. 2) Problem B Petya and Exam (Codeforces 832B) - 暴力

    It's hard times now. Today Petya needs to score 100 points on Informatics exam. The tasks seem easy ...

  8. 经典算法分析：n与lgn

    顺序查找O(n) 二分查找O(lgn) 通过代码来感受性能差别 package recursion; /** * @author zsh * @company wlgzs * @create 2019 ...

  9. Oracle使用——oracle用户相关操作

    前提 以dba角色登录数据库(普通用户没有操作权限):sqlplus / as sysdba 具体操作 创建用户 创建用户 使用默认表空间创建用户 create user xzgxh identifi ...

  10. 论文笔记：ReNet: A Recurrent Neural Network Based Alternative to Convolutional Networks

    ReNet: A Recurrent Neural Network Based Alternative to Convolutional Networks2018-03-05  11:13:05   ...