JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解
animate语法：
<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); // 停止所有动画 ，去的路程中点击停止会直接到达终点，若是返回过程中再点击，会停止到在起点
JQuery动画animate的stop方法使用详解的更多相关文章
- Jquery中find与each方法使用详解
本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...
- jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数
决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...
- jQuery动画高级用法（上）——详解animation中的.queue()函数
如果你拿着一个疑问去找专业人士寻找答案,那么你的一个疑问会变成三个,因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问. 我想这是大多数,包括我在内,IT人在学习过程中碰到的最大问题.当你有一 ...
- jquery 之height(),innerHeight(),outerHeight()方法区别详解
在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width() ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- ajax方法参数详解与$.each()和jquery里面each方法的区别
JQuery中$.ajax()方法参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为g ...
- [转]js中几种实用的跨域方法原理详解
转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...
- CentOS 6.3下Samba服务器的安装与配置方法(图文详解)
这篇文章主要介绍了CentOS 6.3下Samba服务器的安装与配置方法(图文详解),需要的朋友可以参考下 一.简介 Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件, ...
- php课程---Windows.open()方法参数详解
Window.open()方法参数详解 1, 最基本的弹出窗口代码 window.open('page.html'); 2, 经过设置后的弹出窗口 window.open('page.html ...
随机推荐
- VHD容量调整的方法（保存原有vhd）
VHD容量调整的方法(保存原有vhd)特别对于RAMOS的VHD,调整VHD容量的办法:1.在WIN7或者7PE中,右击我的电脑→管理→磁盘管理,挂载原始VHD文件,然后新建一个VHD文件,初始化,格 ...
- 集合-字典（Dictionary）
字典(散列表):允许按照某个键来访问元素,能根据键快速查找元素,也可以自由添加,删除元素.比较像List<T>类,但没有list向后移动元素的性能开销. .net中最主要的字典类是Dict ...
- docker 镜像仓库 Harbor 部署 以及 跨数据复制
docker 镜像仓库 Harbor 部署 跨数据复制 Harbor 是 Vmwar 公司开源的 企业级的 Docker Registry 管理项目 它主要 提供 Dcoker Registry 管理 ...
- Android音频系统之AudioPolicyService
地址:http://blog.csdn.net/edmond999/article/details/18599327 1.1 AudioPolicy Service 在AudioFlinger小节,我 ...
- [Big Data]Spark
SPARK Spark是UC Berkeley AMP lab (加州大学伯克利分校的AMP实验室)所开源的类Hadoop MapReduce的通用并行框架,Spark,拥有Hadoop MapRed ...
- jquery.proxy的四种使用场景及疑问
作者:zccst 其实只有两种使用方式,只不过每一种又细分是否传参. 先给一段HTML,后面会用来测试: <p><button id="test">Test ...
- Python+Selenuim测试网站，只能打开Firefox浏览器却不能打开网页的解决方法
最开始我使用的Selenium版本为2.48,Firefox版本为37,自动化打开网站的时候,可以正常打开. 后来由于Firefox的自检测更新,版本更新为47,导致版本不兼容,自动化打开网站浏览器时 ...
- myEclipse 8.5下SVN环境的搭建
myEclipse 8.5下SVN环境的搭建 在应用myEclips 8.5做项目时,svn会成为团队项目的一个非常好的工具,苦苦在网上寻求了一下午,终于整合好了这个环境,在这里简单介绍下,希望能为刚 ...
- express4.x中路由中间件和挂载路径的关系
express4.x 中一个路由中间件可以挂载到多个路由上,一个路由也可以绑定多个路由中间件,如: //多个路由匹配一个路由中间件 app.use(['/gre+t', '/hel{2}o'], gr ...
- 【iScroll源码学习01】准备阶段 - 叶小钗
[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文 http://www.cnblogs.com/yexiaochai/p/3 ...