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 ...
随机推荐
- 总结下git中一些常用命令
一.目录操作 1.cd 即change directory,改变目录,如 cd d:/www,切换到d盘的www目录. 2.cd .. cd+空格+两个点,回退到上一目录. 3.pwd 即 print ...
- adb root : adbd cannot run as root in production builds
在有些android手机上使用adb root希望获取root权限时出现如下提示信息:adbd cannot run as root in production builds.此时提升root权限的方 ...
- XBee Level Shifting
http://www.faludi.com/bwsn/xbee-level-shifting/ The XBee communication (RX/TX) pins definitely opera ...
- eclipse and systemtap
http://wiki.eclipse.org/Linux_Tools_Project/Systemtap/User_Guide
- 【《Objective-C基础教程 》笔记ch03】（四）OC中的OOP
一.声明类接口步骤: 1.声明一个类接口,使用@interfacekeyword加上类名称. 2.用 { 实例变量 } 来定义各种数据成员. 3.方法声明,採用中缀符语法声明一个c函数,用到了冒号 ...
- poj 1028 Web Navigation（模拟）
题目链接:http://poj.org/problem? id=1028 Description Standard web browsers contain features to move back ...
- Redux-saga学习笔记
概述 Redux-saga在Redux应用中扮演’中间件’的角色,主要用来执行数据流中的异步操作.主要通过ES6中的generator函数和yield关键字来以同步的方式实现异步操作. 基本用法: 使 ...
- 使用结构struct作为Dictionary<TKey,TValue>的键
我们经常用简单数据类型,比如int作为泛型Dictionary<TKey,TValue>的key,但有时候我们希望自定义数据类型作为Dictionary<TKey,TValue> ...
- CentOS 6.5系统下安装和配置NFS服务
一.环境介绍: 服务器:centos 192.168.1.225 客户端:centos 192.168.1.226 二.安装: NFS的安装配置: centos 5 : 1 yum -y instal ...
- RobotFramework自动化2-自定义关键字
前言 有时候一个页面上有多个对象需要操作,如果一个个去定位的话,比较繁琐,这时候就可以定位一组对象.Selenium2library提供了Get Webelements 关键字,用于定位一组元素 以百 ...