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. Python3基础 list(enumerate()) 将一个列表的每一个元素转换成 带索引值的元组

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  2. MyEclipse中提示SpringMVC的XML配置文件出错解决方法

    手动添加schema文件,方法如下: 1,依次选择:windwos->preferences->myeclipse->files and editors->xml->xm ...

  3. h2database.com 高级特性

    http://www.h2database.com/html/advanced.html http://www.h2database.com/html/features.html

  4. SQLSERVER设置行号

    select row_number()over(order by columnname)as rownum,* from tablename 按照columnname列进行排列

  5. Ubuntu 开启SSH 以及LAMP环境安装

    1. 更新 apt-get sudo apt-get update 2.安装 openssh sudo apt-get install openssh-server 3.设置root账号密码 sudo ...

  6. [转]Axis2创建WebService实例

    以下文章来自http://clq9761.iteye.com/blog/976029,作者clq9761 一.Axis2的下载和安装 1.可从http://ws.apache.org/axis2/ 下 ...

  7. implemented loader.php

    http://stackoverflow.com/questions/11787176/manage-url-routes-in-own-php-framework This is how i imp ...

  8. Github for Windows使用图文教程_西西软件资讯

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  9. jquery刷新iframe页面的方法(兼容主流)

    1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取 ...

  10. ios 添加PCH文件