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 ...
随机推荐
- jquery.uploadify 使用过程
HTML: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...
- SOLARIS 11G 安装 ORACLE 11G
https://docs.oracle.com/cd/E11882_01/install.112/e48357/pre_install.htm#SSDBI1209 http://blog.chinau ...
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系
一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...
- 《Head First 设计模式》学习笔记——策略模型
我们全都使用别人设计好的库与框架.我们讨论库与框架.利用他们的API编译成我们的程序.享受运用别人的代码所带来的长处.看看java api它所带来的功能:网络.GUI.IO等.库与框架长久以来,一直扮 ...
- Android 系统服务一览表
在<Zygote进程[3]--SystemServer的诞生>一文中介绍了SystemServer的诞生,本文来看一下SystemServer中初始化的系统服务. 1.AccountMan ...
- Android中RelativeLayout和LinearLayout性能分析
先看一些现象吧:用eclipse或者Android studio,新建一个Activity自动生成的布局文件都是RelativeLayout,或许你会认为这是IDE的默认设置问题,其实不然,这是由 a ...
- water-and-jug-problem
以下这个解法也是参考了一些讨论: https://leetcode.com/discuss/110235/c-solution-using-euclidean-algorithm 还有这个解释原理的, ...
- 第二十四章 springboot注入servlet
问:有了springMVC,为什么还要用servlet?有了servlet3的注解,为什么还要使用ServletRegistrationBean注入的方式? 使用场景:在有些场景下,比如我们要使用hy ...
- go语言之进阶篇指针类型和普通类型的方法集
方法集 类型的方法集是指可以被该类型的值调用的所有方法的集合. 用实例实例 value 和 pointer 调用方法(含匿名字段)不受方法集约束,编译器编总是查找全部方法,并自动转换 receiver ...
- eclipse无法解析导入 java.util
eclipse无法解析导入 java.util是因为jre配置错误. 1.点击需要导入jar的项目,右击项目属性(properties),进入到如下图界面: 2.选择Java Build Path选项 ...