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 ...
随机推荐
- [转]makefile文件的编写规则及实例
http://xueqi.iteye.com/blog/1567866 1.一个简单的makefile例子 假设一个程序有两个文件file1.c,file2.c,每个文件都包含head.h,生 ...
- hudson配置教程
Hudson配置教程 hudson是个优 秀的开源工具,可惜是小日本开发的.这点不爽.拿过来用吧.我们公司(Qisda)的用途是 用来晚上定时的抓Android的代码,然后编译,保存img文件,然后根 ...
- 地址选择的，弹出的下拉。select。通过《option》《/option》来隔开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- USACO Section 1.2 Name That Number 解题报告
题目 题目描述 在一个农场里面,每一头牛都有一个数字编号,但是现在这些牛不喜欢这种编号,它们想把这些数字编号转化成为可以接受的字母的形式.数字与字母的转换表如下: 2: A,B,C 5: J,K,L ...
- 上传数据插件 Easy Populate 遇到问题 ?langer=remove
批量上传,出现如下错误提示: ADD NEW PRODUCT FAILED! – Model: no200 – SQL error. Check Easy Populate error log in ...
- OCMOD代码调整系统(Modification System)
OCMOD 是一个允许用户上传压缩文件的系统,该压缩文件包含了XML, SQL和PHP文件,从而修改网站相关地方. OCMOD是opencart系统的代码调整系统,遵循GPL3协议免费使用. 如果OC ...
- 一个int类型引发的bug
一.引言 今天我在项目开发中,遭遇了一个莫名其妙的问题,概括加抽象后形成如下问题:在使用MyBatis的XML语句实现Dao层接口 List<Person> selectBySome(@P ...
- 关于Bean\Entity\Model\POJO的一些个人理解
本文没有长篇累牍的,严格的,标准的表述,只是我在开发过程中,读书过程中的一些个人理解,可能不太准备,但是我觉得应该是最方便初学者理解的吧? 一.Bean 对于Bean而言,我的理解是只要是Java的类 ...
- jsp显示计算数值, 四舍五入
<script>document.write(Math.round(<%= rs_MFM.getInt("PVRCompl") %>/<%= rs_M ...
- linux ssl 双向认证
一,首先切换到apache目录下,创建一个CA文件夹 sudo mkdir CA sudo chmod 777 CA 二,然后进去CA文件夹 cp CA 三,创建其它文件 mkdir demoCA m ...