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. ansible中的playbook详解

    首先简单说明一下playbook,playbook是什么呢?根本上说playbook和shell脚本没有任何的区别,playbook就像shell一样,也是把一堆的命令组合起来,然后加入对应条件判断等 ...

  2. Linux 搭建安装Maven环境

    1.前提条件: 1)下载并安装好JDK .在终端输入命令“java -version”,如果出现类似如下信息说明JDK安装成功. $ java -version java version " ...

  3. 阿里云centos远程连接mysql

    首先在服务器管理控制台设置防火墙规则 添加规则 使用root登录到mysql 添加一个用户名,权限为%的远程连接用户 grant all on *.* to 'yuancheng'@'%' ident ...

  4. Elasticsearch.Net使用(一)【入门篇】

    http://blog.csdn.net/wulex/article/details/52138564 加数据 //在调用下面的index方法的时候,如果没有指定使用哪个index,ElasticSe ...

  5. vue2.0之Vue Baidu Map 局部注册使用

    文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id= ...

  6. bzoj 1420 Discrete Root - 原根 - exgcd - BSGS

    题目传送门 戳我来传送 题目大意 给定$k, p, a$,求$x^{k}\equiv a \pmod{p}$在模$p$意义下的所有根. 考虑模$p$下的某个原根$g$. 那么$x  = g^{ind_ ...

  7. Jmeter在Linux下执行

    1.上传jmeter文件到服务器上(最好自己建一个文件夹:如:mkidr yzb_jmeter) 2.上传jmeter脚本到yzb_jmeter,并修改权限:chmod +x 脚本文件 3.修改统计的 ...

  8. PowerDesigner 学习：十大模型及五大分类

    个人认为PowerDesigner 最大的特点和优势就是1)提供了一整套的解决方案,面向了不同的人员提供不同的模型工具,比如有针对企业架构师的模型,有针对需求分析师的模型,有针对系统分析师和软件架构师 ...

  9. Flask学习【第1篇】：Flask介绍

    Flask介绍(轻量级的框架,非常快速的就能把程序搭建起来) Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是So ...

  10. 高通平台framework,hal,kernel打开log【转】

    本文转载自:https://blog.csdn.net/u010164190/article/details/78625636 .Add framework log #define LOG_NDEBU ...