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. 理解PHP数组的序列化和反序列化

    当我们想要将数组值存储到数据库时,就可以对数组进行序列化操作,然后将序列化后的值存储到数据库中.其实PHP序列化数组就是将复杂的数组数据类型转换为字符串,方便数组存库操作.对PHP数组进行序列化和反序 ...

  2. Android 手电筒源代码

    近期因为公司须要,做了一个手电筒,事实上手电筒原理非常easy,就是调用照相机的闪光灯,控制闪光灯的开关,就能够实现手电筒的效果, 强调一下,代码中一定要注意在结束的时候对闪光灯进行释放,否则就会导致 ...

  3. datagrid单元格格式化样式化

    本文体验datagrid单元格的格式化和样式化.   datagrid显示的DOM结构 <td field="code"> <div style="te ...

  4. jsp中excel文件的创建与读取

    1.创建excel文件//这里的jxl不是java的标准jar包,需要在项目中另外加载 import jxl.Workbook; import jxl.write.Label; import jxl. ...

  5. 环境变量篇getenv putenv setenv

    getenv(取得环境变量内容) 相关函数 putenv,setenv,unsetenv 表头文件 #include<stdlib.h> 定义函数 char * getenv(const ...

  6. Coursera课程《Python数据结构》中课程目录

    Python Data Structures Python Data Structures is the second course in the specialization Python for ...

  7. MySQL 用户管理及权限管理

    MySQL 默认有个root用户,但是这个用户权限太大,一般只在管理数据库时候才用.如果在项目中要连接 MySQL 数据库,则建议新建一个权限较小的用户来连接. 在 MySQL 命令行模式下输入如下命 ...

  8. Objective-C:对象之间循环引用会造成死循环

    对象之间的循环引用        两个对象A.B,有可能会出现一种特殊的情况:A中包含B的实例变量:B中又包含A的实例变量,如果两个实例变量都是强引用(A有B实例变量的所有权,B也有A的实例变量的所有 ...

  9. Objective-C：异常的处理

    // // main.m // 03-动态绑定 // // Created by mac on 15/8/11. // Copyright (c) 2015年. All rights reserved ...

  10. Informatica 常用组件Lookup缓存之一 概述

    可以配置查找转换以高速缓存查找表.PowerCenter 将在处理高速缓存查找转换中的第一个数据行时在存储器中建立高速缓存.它将根据您在转换或会话特性中配置的数量来分配高速缓存区内存.PowerCen ...