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. 学写网页 #06# table

    A B E C D <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> & ...

  2. EDK II之USB总线驱动的实现框架

    本文简单介绍一下UEFI中USB驱动的实现框架: 下图是USBD向上层驱动提供的接口: 1.从图中我们可以看出,USBDI的实现主要通过调用HCDI实现 和 访问USB_INTERFACE结构体(该结 ...

  3. Capture HTML Canvas as gif/jpg/png/pdf?

    https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf https://stackoverf ...

  4. 9i时候的块

    Header (Common and Variable) The header contains general block information, such as the block addres ...

  5. Spring Boot 2 (七)：Spring Boot 如何解决项目启动时初始化资源

    Spring Boot 2 (七):Spring Boot 如何解决项目启动时初始化资源 在项目启动的时候需要做一些初始化的操作,比如初始化线程池,提前加载好加密证书等.今天就给大家介绍一个 Spri ...

  6. Nginx 容器教程

    春节前,我看到 Nginx 加入了 HTTP/2 的 server push 功能,就很想试一下. 正好这些天,我在学习 Docker,就想到可以用 Nginx 容器.万一哪里改乱了,直接删掉,再重启 ...

  7. [c/c++] programming之路（7）、数据类型转换、偷钱小程序、进制转换

    一.数据类型转换 #include<stdio.h> //某些场合,必须进行数据类型转换,以匹配调用 void main0(){ printf();//printf不管你是什么类型,解析失 ...

  8. java的MVC与C#

    Views: @{ Layout = "~/Views/Shared/_Layout.cshtml"; } @{ ViewBag.Title = "Index" ...

  9. Codeforces 675E Trains and Statistic - 线段树 - 动态规划

    题目传送门 快速的vjudge通道 快速的Codeforces通道 题目大意 有$n$个火车站,第$i$个火车站出售第$i + 1$到第$a_{i}$个火车站的车票,特殊地,第$n$个火车站不出售车票 ...

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

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