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. Google's Machine Learning Crash Course #04# First Steps with TensorFlow

    1.使用 TensorFlow 的建议 Which API(s) should you use? You should use the highest level of abstraction tha ...

  2. Web开发相关笔记 #04# WebSocket

    本文的主要内容: HTTP VS. WebSocket WebSocket 的客户端实现(JavaScript) WebSocket 的服务端实现(Java & apache WebSocke ...

  3. kivy中文

    from kivy.config import Config Config.set('kivy', 'default_font', [ 'msgothic', 'DroidSansFallback.t ...

  4. shell 获取随机字符串

    一直使用 /dev/urandom 和md5sum的方式去随机字符串,感觉还是不够随机,毕竟只有小写字母和数字嘛. 换换口味: [root@localhost ~]# arr=(`echo {a..z ...

  5. 第一个django项目-通过命令行和pycharm两种方式

    以本机环境为例,ip地址为172.20.16.148,windows平台,虚拟环境路径为d:\VirtualEnv,项目存放位置为d:\DjangoProject 命令行方式 1.进入虚拟环境创建项目 ...

  6. bzoj4698 / P2463 [SDOI2008]Sandy的卡片

    P2463 [SDOI2008]Sandy的卡片 直接二分长度暴力匹配....... 跑的还挺快 (正解是后缀数组的样子) #include<iostream> #include<c ...

  7. Spring Boot(十八)：使用Spring Boot集成FastDFS

    Spring Boot(十八):使用Spring Boot集成FastDFS 环境:Spring Boot最新版本1.5.9.jdk使用1.8.tomcat8.0 功能:使用Spring Boot将文 ...

  8. 02: CMDB设计思路

    1.1 cmdb理解   参考博客:https://www.cnblogs.com/laowenBlog/p/6825420.html   参考博客2:https://www.cnblogs.com/ ...

  9. debug代码时遇到循环时提高效率方法

    在循环时,需要查看uid=uid=12007255时的代码执行情况 可以在循环代码中加入 if((Long)map.get("uid") == 12007255){ System. ...

  10. 20145311王亦徐 《网络对抗技术》 MSF基础应用

    20145311王亦徐 <网络对抗技术> MSF基础应用 实验内容 掌握metasploit的基本应用方式以及常用的三种攻击方式的思路 主动攻击,即对系统的攻击,不需要被攻击方配合,以ms ...