stop()函数直接停止动画，finish()也会停止动画同时所有排队的动画的CSS属性跳转到他们的最终值。

示例代码：

<html>

    <head>

        <meta charset="UTF-8" />

        <title>jQuery停止动画finish和stop函数区别</title>

        <style type="text/css">

            div {

                border: 1px solid green;

                width: 200px;

                height: 200px;

                line-height: 200px;

                text-align: center;

            }

        </style>

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js 

"></script>

    </head>

    <body>

        <button type="button" id="start">start</button>

        <button type="button" id="start">stop</button>

        <button type="button" id="finish">finish</button>

        <div class="">

            动画

        </div>

        <script type="text/javascript">

            $(document).ready(function() {

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

                    $("div").animate({

                        width: '1800px'

                    }, 3000);

                });

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

                    //停止当前正在运行的动画， width: '+=100px'可以停止

                    //停止当前正在运行的动画  width: '1800px'不能停止

                    $("div").stop();

                });

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

                    //停止当前正在运行的动画  width: '+=100px'可以停止

                    //停止当前正在运行的动画  width: '1800px'可以停止，并且停止在最后一帧

                    $("div").finish();

                });

            });

        </script>

    </body>

</html>

说明：

示例中stop()函数没有停止动画，为什么？

jQuery停止动画finish和stop函数区别的更多相关文章

  1. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  2. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  3. jquery 停止动画 stop的几种用法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery停止动画——stop()方法的使用

    很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了. sto ...

  5. jQuery停止动画和判断是否处于动画状态

    1.停止元素的动画 stop([clearQueue][,gotoEnd]); 参数clearQHCHC和gotoEnd都足町选的参数,为Boolean值(ture或flase).clearQueue ...

  6. Jquery停止动画

    stop方法 第一个参数:是否清除动画队列 true | false 第二个参数:是否跳转到动画最终效果   true | false 使用stop()方法的技巧 当下拉菜单和手风琴产生动画队列的问题 ...

  7. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  8. jQuery 效果 - 停止动画

    jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. ...

  9. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

随机推荐

  1. Duplicate Elimination in Scrapy(转)

    之前介绍 Scrapy 的时候提过 Spider Trap ,实际上,就算是正常的网络拓扑,也是很复杂的相互链接,虽然我当时给的那个例子对于我感兴趣的内容是可以有一个线性顺序依次爬下来的,但是这样的情 ...

  2. spring事务的隔离级别（透彻理解）

    1.spring 事务这个东西,是轮子,每个service,都需要用到.所以干脆就做在框架层实现. 2.spring是怎么给你的service方法加事务的呢?jdk动态代理,会针对每个service类 ...

  3. Delphi-Cross-Socket

    Delphi-Cross-Socket GITHUB:https://github.com/winddriver/Delphi-Cross-Socket # Delphi 跨平台 Socket 通讯库 ...

  4. 常用VPS测试工具整理

    来源: http://www.vpser.net/manage/vps-test-tool.html 购买VPS前主要是使用一些网络测试工具如ping.tracert.WinMTR之类的工具进行测试, ...

  5. 【springMVC 后台跳转前台】1.使用ajax访问的后台，后台正常执行，返回数据，但是不能进入前台的ajax回调函数中 ----2.前后台都没有报错，不能进入ajax回调函数

    问题1: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中 问题展示:  问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方 ...

  6. Selenium2+python自动化39-关于面试的题

    前言 最近看到群里有小伙伴贴出一组面试题,最近又是跳槽黄金季节,小编忍不住抽出一点时间总结了下, 回答不妥的地方欢迎各位高手拍砖指点.   一.selenium中如何判断元素是否存在? 首先selen ...

  7. SSL协议具体解释

    背景介绍    近期在看<password学与网络安全>相关的书籍,这篇文章主要具体介绍一下著名的网络安全协议SSL. 在開始SSl介绍之前,先给大家介绍几个password学的概念和相关 ...

  8. ubuntu下如何查看自己的外网IP

    1.1 安装使用curl命令实现      sudo apt-get install curl1.2 输入命令      curl ifconfig.me

  9. C#获取网页内容，并且处理正确编码

    控制台调用static void Main(string[] args) { string code = GetEncodings("http://www.cnblogs.com" ...

  10. VS2010+OpenCV2.4.3配置

    VS2010+OpenCV2.4.3配置:  环境变量path: D:\openCV2.4.3\opencv\build\x86\vc10\bin  项目-属性-VC++目录:(vs2008中,工具- ...