jquery的animation会自动进入队列,就出现了一个问题,这些动画会一一执行完成,而我们实际的本意是当鼠标移开的时候动画即终止。

停止元素的动画方法:stop()
语法结构:stop([clearQueue],[gotoEnd])
clearQueue 和 gotoEnd 都为可选参数,为布尔值。
clearQueue : 是否要清空未执行玩的动画列表
gotoEnd : 是否直接将正在执行的动画跳转到末状态

经常在hover时间的动画效果里用到 stop() 方法,可以避免动画效果与光标动作不一致时导致的延迟动画。
例如:

1
2
3
4
5
6
7
$(".test").hover(function(){
    $(this).stop().animate({height:"150",width:"300"},200);
},function(){
    $(this).stop().animate({height:"50",width:"100"},3200);
});

判断元素是否处于动画状态:

1
2
3
if(! $(elememt).is(":animated") ){ //判断元素是否处于动画状态
 //如果当前没有进行动画,则添加
}

jQuery如何停止元素的animate动画,还有怎样判断是否处于动画状态的更多相关文章

  1. jQuery停止动画和判断是否处于动画状态

    1.停止元素的动画 stop([clearQueue][,gotoEnd]); 参数clearQHCHC和gotoEnd都足町选的参数,为Boolean值(ture或flase).clearQueue ...

  2. 锋利的jQuery-4--停止动画和判断是否处于动画状态(防止动画加入队列过多的办法)

    1.停止元素的动画:stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列,第二个参数代表是否直接将正在执行的动画跳转到末状态. 无参数stop():立即停 ...

  3. jQuery中关于如何使用animate自定义动画

    动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...

  4. jQuery animate方法开发极客标签Logo动画融合效果

    在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...

  5. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  6. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

  7. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  8. jquery学习笔记----元素筛选

    1.eq()  筛选指定索引号的元素2.first() 筛选出第一个匹配的元素3.last() 筛选出最后一个匹配的元素4.hasClass() 检查匹配的元素是否含有指定的类5.filter() 筛 ...

  9. 使用jquery获取父元素或父节点的方法

    今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...

随机推荐

  1. XCode5添加新建类模板(Cocos2dx Template Class for Scene or Layer)

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=505 因为常用cocos2dx开 ...

  2. Java基础---Java---IO流-----LineNumberReader方法及原理、自定义一个LineNumberReader、字节流、图片复制、mp3复制、

    LineNumberReader 跟综行号的缓冲字符输入流,些类定义了setLineNumber(int)和getLineNumber(int),它们可分别用于设置和获取当前行号 import jav ...

  3. sublime text的Ctrl+alt+up快捷键失效问题解决

    上周一入职了新公司,安装了sublime text3 之后发现多行光标定位快捷键"Ctrl+alt+up|down"不能使用了.最后发现是快捷键冲突.我的电脑安装的是win7专业版 ...

  4. tomcat如何路由映射网址

    对于web容器来说,根据请求客户端路径路由到对应的资源属于其核心功能,假设用户在自己电脑上使用浏览器输入网址http://www.test.com/test/index.jsp,报文通过互联网网络到达 ...

  5. HMM:隐马尔科夫模型-维特比算法

    http://blog.csdn.net/pipisorry/article/details/50731584 目标-解决HMM的基本问题之二:给定观察序列O=O1,O2,-OT以及模型λ,如何选择一 ...

  6. Mybatis执行BatchExecutor(四)

    BatchExecutor:顾名思义就是进行批量操作,通过批量操作来提高性能 public class BatchExecutor extends BaseExecutor { public stat ...

  7. Activity, Service,Task, Process and Thread之间的关系

    Activity, Service,Task, Process and Thread之间到底是什么关系呢? 首先我们来看下Task的定义,Google是这样定义Task的:a task is what ...

  8. 【Unity Shaders】Reflecting Your World —— Unity3D中的法线贴图和反射

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  9. H5学习之旅-H5的基本标签(2)

    H5的标签和html的标签没什么区别,主要介绍H5的基本标签 1.基础标签header和body,header的<title>元素主要是显示在标签页面里面,以及设置使用的语言和编码格式.b ...

  10. (四十八)Quartz2D引擎进阶

    图形上下文栈: 应用,修改过上下文后,下一次画会在这个基础上进行,如果清空状态,需要上下文栈. 可以先把原来的上下文保存起来,然后恢复: - (void)drawRect:(CGRect)rect { ...