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


Posted in Javascript onMay 09, 2014

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

Javascript 相关文章推荐
MSN消息提示类
Sep 05 Javascript
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
Javascript玩转继承(三)
May 08 #Javascript
Javascript玩转继承(二)
May 08 #Javascript
js的Prototype属性解释及常用方法
May 08 #Javascript
Javascript玩转继承(一)
May 08 #Javascript
玩转方法:call和apply
May 08 #Javascript
jQuery产品间断向下滚动效果核心代码
May 08 #Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 #Javascript
You might like
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php 小乘法表实现代码
2009/07/16 PHP
PHP 字符串分割和比较
2009/10/06 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
javascript中的隐式调用
2018/02/10 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
python列表去重的二种方法
2014/02/14 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
python 字段拆分详解
2019/12/17 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python内置函数property()如何使用
2020/09/01 Python
经典安踏广告词
2014/03/21 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
承诺书格式范文
2014/06/03 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
新教师培训心得体会
2014/09/02 职场文书
党支部四风整改方案
2014/10/25 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python