JQuery动画animate的stop方法使用详解


Posted in Javascript onMay 09, 2014

animate语法:

$(selector).animate(styles,speed,easing,callback)

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Testing</title> 
<link rel="stylesheet" href="css/reset.css"> 
<script src="js/jquery.js"></script> 
<style> 
.wrap { 
position: relative; 
height: 300px; 
width: 300px; 
border:5px solid #FCF; 
} 
.wrap div { 
position: absolute; 
left: 0;top: 0; 
height: 50px; 
width: 50px; 
background: #FA0; 
} 
</style> 
</head> 
<body> 
<input type="button" id="btn1" value="停止当前动画"> 
<input type="button" id="btn2" value="停止所有动画"> 
<input type="button" id="btn3" value="停止所有动画,到达终点"> 
<div class="wrap"> 
<div></div> 
</div> 
<script> 
function moveX(){ 
$('.wrap div').animate({'left':'250px'},1000).animate({'left':'0px'},1000); 
} moveX(); $('#btn1').click(function(){ 
$('.wrap div').stop(); // 停止当前动画,沿路返回起点,若是返回过程中再点击,会暂停在路中 
clearInterval(); 
}) 
$('#btn2').click(function(){ 
$('.wrap div').stop(true); // 停止所有动画 去的路程中点击停止会直接到达终点,若是返回过程中再点击,会暂停在路中 
}) 
$('#btn3').click(function(){ 
$('.wrap div').stop(true,true); // 停止所有动画 ,去的路程中点击停止会直接到达终点,若是返回过程中再点击,会停止到在起点 
}) 
// .stop() // 停止当前动画 
// .stop(true) // 停止所有动画 
// .stop(true,true) // 停止所有动画,到达动画终点 
</script> 
</body> 
</html>

.stop(); // 停止当前动画,沿路返回起点,若是返回过程中再点击,会暂停在路中

.stop(true); // 停止所有动画 去的路程中点击停止会直接到达终点,若是返回过程中再点击,会暂停在路中

.stop(true,true); // 停止所有动画 ,去的路程中点击停止会直接到达终点,若是返回过程中再点击,会停止到在起点

Javascript 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
微信小程序 form组件详解
Oct 25 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
Javascript玩转继承(三)
May 08 #Javascript
Javascript玩转继承(二)
May 08 #Javascript
js的Prototype属性解释及常用方法
May 08 #Javascript
Javascript玩转继承(一)
May 08 #Javascript
玩转方法:call和apply
May 08 #Javascript
jQuery产品间断向下滚动效果核心代码
May 08 #Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 #Javascript
You might like
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python中去空格函数的用法
2014/08/21 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python中文字符串截取问题
2015/06/15 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Python中 map()函数的用法详解
2018/07/10 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
上课玩手机的检讨书
2014/10/01 职场文书
怎样写辞职信
2015/02/27 职场文书
2015年财务部工作总结
2015/04/10 职场文书
毕业实习单位意见
2015/06/04 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题