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 相关文章推荐
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
js回调函数原理与用法案例分析
Mar 04 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的ob_start来生成静态页面的方法分析
2011/03/09 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
js有关元素内容操作小结
2011/12/20 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
js 操作符汇总
2014/11/08 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
利用node.js如何创建子进程详解
2017/12/09 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
python提示No module named images的解决方法
2014/09/29 Python
Python模拟三级菜单效果
2017/09/11 Python
python装饰器实例大详解
2017/10/25 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Python绘制数码晶体管日期
2021/02/19 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
2015年话务员工作总结
2015/04/29 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
spring cloud 配置中心native配置方式
2021/09/25 Java/Android