jQuery停止动画finish和stop函数区别
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函数区别的更多相关文章
- jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining
一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...
- jQuery 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...
- jquery 停止动画 stop的几种用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery停止动画——stop()方法的使用
很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了. sto ...
- jQuery停止动画和判断是否处于动画状态
1.停止元素的动画 stop([clearQueue][,gotoEnd]); 参数clearQHCHC和gotoEnd都足町选的参数,为Boolean值(ture或flase).clearQueue ...
- Jquery停止动画
stop方法 第一个参数:是否清除动画队列 true | false 第二个参数:是否跳转到动画最终效果 true | false 使用stop()方法的技巧 当下拉菜单和手风琴产生动画队列的问题 ...
- jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链
jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...
- jQuery 效果 - 停止动画
jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. ...
- jQuery animate()动画效果
1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...
随机推荐
- How to match between physical usb device and its drive letter?
struct tagDrives { WCHAR letter; WCHAR volume[ BUFFER_SIZE ]; } g_drives[ ]; // WCHAR GetUSBDrive( ) ...
- linux下patch命令使用详解---linux打补丁命令
http://blog.csdn.net/pashanhu6402/article/details/51849354 语 法:patch [-bceEflnNRstTuvZ][-B <备份字首字 ...
- Vi 编辑
1.vi的基本概念 基本上vi可以分为三种状态,分别是命令模式(command mode).插入模式(Insert mode)和底行模式(last line mode),各模式的功能区分如下: 1) ...
- FreeCMS开发过程问题总结（持续更新中）
正在做freecms的二次开发,特对开发过程中遇到的问题及原因分析进行总结分享,共勉. 2014/4/25 错误提示:静态化处理失败,原因:Expression answerList is undef ...
- Javascript：猜猜弹出的是啥？为啥？
背景 经常需要向新入职的年轻同学解释Javascript的两个概念:单线程和作用域链,今天就再写篇博客说明一下. 单线程 队列:只有一个用来存储回调方法的队列. 消费线程:只有一个消费线程,不停的从队 ...
- jsp下Kindeditor环境搭建
1.环境:tomcat 2.需要外部jar包: commons-fileupload-1.2.1.jar commons-io-1.4.jar json_simple-1.1.jar 3.下载Kind ...
- Caused by: org.xml.sax.SAXParseException: The reference to entity "characterEncoding" must end with the ';' delimiter.
at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(Unknown Sourc ...
- post文件的html
<HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio& ...
- C# 编程指南
此部分详细介绍了 C# 语言主要功能,以及通过 .NET Framework 可以在 C# 中使用的功能. 阅读此部分的大部分内容的前提是,你已对 C# 和一般编程概念有一定的了解. 如果完全没有接触 ...
- [1] 平面(Plane)图形的生成算法
顶点数据的生成 bool YfBuildPlaneVertices ( Yreal width, Yreal length, Yreal height, Yuint slices, Yuint sta ...