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 ...
随机推荐
- 转：Loadrunner上传文件解决办法（大文件）
最近再做一个跟海量存储相关的项目测试,需要通过LR模拟用户大量上传和下载文件,请求是Rest或Soap,同时还要模拟多种大小尺寸不一的文件 通常情况下,都是使用简单的post协议即可: 方法一: we ...
- git log 查看 当前分支的 提交历史
git log 查看 当前分支的 提交历史 在提交了若干更新之后,想回顾下提交历史,可以使用 git log 命令查看 默认不用任何参数的话,git log 会按提交时间列出所有的更新,最近的更新排 ...
- must override a superclass method
<properties> <maven.compiler.encoding>UTF-8</maven.compiler.encoding> ...
- Mac下eclipse导入其他工程中文注释出现乱码解决方案
因为用的是mac版的eclipse,导入其他工程注释出现乱码的情况,找了网上的很多方法,大部分都是说的workspace,在这里修改,但是我修改之后还是乱码,最后发现这样一个方法,才得以解决. 点击 ...
- LVS+Keppalived实现高可用负载均衡
三.LVS Keppalived的安装 3.1.环境描述 LVS server1 (Master):10.0.0.202 虚拟IP为:10.0.0.210 LVS server2 ( Slave ) ...
- C++异常(exception)第一篇--综合讲解
摘要:catch(exception &ex)是捕获所有标准库定义中的类std:exception;catch(...)则是捕获所有的异常. 1.简介 异常是由语言提供的运行时刻错误处理的一种 ...
- <iOS>UIImage变为NSData并进行压缩
http://www.cnblogs.com/robinkey/archive/2013/01/21/2869930.html //sdk中提供了方法可以直接调用 UIImage *img = [UI ...
- 微信公众号支付开发全过程 --JAVA
按照惯例,开头总得写点感想 ------------------------------------------------------------------ 业务流程 这个微信官网说的还是很详细的 ...
- css清除浮动float的三种方法总结
原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...
- IOS开发中AVFoundation中AVAudioPlayer的使用
IOS开发中如何调用音频播放组件 1.与音频相关的头文件等都在AVFoundation.h中,所以第一步是添加音频库文件: #import <AVFoundation/AVFoundation. ...