JQuery动画animate的stop方法使用详解

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); // 停止所有动画 ，去的路程中点击停止会直接到达终点，若是返回过程中再点击，会停止到在起点

JQuery动画animate的stop方法使用详解的更多相关文章

  1. Jquery中find与each方法使用详解

    本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...

  2. jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数

    决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...

  3. jQuery动画高级用法（上）——详解animation中的.queue()函数

    如果你拿着一个疑问去找专业人士寻找答案,那么你的一个疑问会变成三个,因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问. 我想这是大多数,包括我在内,IT人在学习过程中碰到的最大问题.当你有一 ...

  4. jquery 之height(),innerHeight(),outerHeight()方法区别详解

    在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width() ...

  5. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  6. ajax方法参数详解与$.each()和jquery里面each方法的区别

    JQuery中$.ajax()方法参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为g ...

  7. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  8. CentOS 6.3下Samba服务器的安装与配置方法(图文详解)

    这篇文章主要介绍了CentOS 6.3下Samba服务器的安装与配置方法(图文详解),需要的朋友可以参考下   一.简介  Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件, ...

  9. php课程---Windows.open()方法参数详解

    Window.open()方法参数详解 1, 最基本的弹出窗口代码   window.open('page.html'); 2, 经过设置后的弹出窗口   window.open('page.html ...

随机推荐

  1. spider JAVA如何判断网页编码 （转载）

    原文链接 http://www.cnblogs.com/nanxin/archive/2013/03/27/2984320.html 前言 最近做一个搜索项目,需要爬取很多网站获取需要的信息.在爬取网 ...

  2. mystring c++ 自己的string 封装

    1 /************************************************************************* > File Name: mystrin ...

  3. sina微博上看到的关于android界面设计相关的规范

    图片来自:http://photo.weibo.com/5174249907/wbphotos/large/mid/3777508610941685/pid/005EaCLFjw1emcpzdgrj9 ...

  4. 注册表检测office版本

    #region 查询注册表,判断本机是否安装Office2003,2007和WPS public int ExistsRegedit() { int ifused = 0; RegistryKey r ...

  5. css Loading 教程

    http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

  6. mysql优化---优化工具MySQL performance tuning primer script

    MySQL performance tuning primer script一个简单好用的mysql优化工具,其实一个shell脚本 下载: $ wget http://www.day32.com/M ...

  7. springMVC文件上传优化

    1. 新建web project 2. 填 jar,注意新加入两个上传文件的jar, commons-io, commons-fileupload 3. 改写web.xml <?xml vers ...

  8. highcharts分段显示不同颜色

    最近在做统计图的时候,碰到一个需求 类似如下: 就是在红色虚线框内的折线在不同区域用不同的颜色表示,并且是虚线. 开始定位为用highcharts库实现.确定用这个库后,开始在网上查资料,发现有类似的 ...

  9. CodeForces 621A Wet Shark and Odd and Even

    水题 #include<cstdio> #include<cstring> #include<cmath> #include<ctime> #inclu ...

  10. 一个很好玩的命令：stty

    stty命令修改终端命令行的相关设置.语法stty(选项)(参数)选项-a:以容易阅读的方式打印当前的所有配置:-g:以stty可读方式打印当前的所有配置.参数终端设置:指定终端命令行的设置选项.实例 ...