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 滚轮事件使用说明
Mar 07 Javascript
js单例模式的两种方案
Oct 22 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
javascript实现简易的计算器
Jan 17 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php变量作用域的深入解析
2013/06/03 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
教师求职推荐信范文
2013/11/20 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
绿色环保标语
2014/06/12 职场文书
高中学生自我评价范文
2014/09/23 职场文书
学期个人自我总结
2015/02/13 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers