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. tomcat集群的failover机制

    集群要提供高可用性就必须要有某种机制去保证,常用的机制为failover(故障转移),简单说就是通过一定的heartbeat检测是否有故障,一旦故障发生备份节点则接管故障节点的工作. tomcat使用 ...

  2. Android的ImageSwitcher和TextSw-android学习之旅(三十四)

    ImageSwitcher简介 ImageSwitcher继承了ViewSwitcher,所以在切换时候会有动画,可以把它理解成一个动画版本的ImageView. 他的showNext(),和show ...

  3. 【图的DFS】图的DFS非递归算法

    在DFS的递归算法中,DFS框架如下: 1访问起点v0 2依次以v0的未访问的连接点为起点,DFS搜索图,直至图中所有与v0路径相通的顶点都被访问. 3若该图为非连通图,则图中一定还存在未被访问的顶点 ...

  4. 软件测试进阶(一)A/B测试终极指南

    A/B测试终极指南 A/B测试不是一个时髦名词.现在很多有经验的营销和设计工作者用它来获得访客行为信息,来提高转换率.然而,A/B测试与SEO不同的是,人们都不太知道如何进行网站分析和可用性分析.他们 ...

  5. XML文档操作之JAXP下实现

    JAXP是java API for xml PRocessing的缩写. 其API可以在javax.xml.parsers 这个包中找到.这个包向用户提供了两个最重要的工厂类,SAXParserFac ...

  6. RabbitMQ消息队列(七):适用于云计算集群的远程调用(RPC)

            在云计算环境中,很多时候需要用它其他机器的计算资源,我们有可能会在接收到Message进行处理时,会把一部分计算任务分配到其他节点来完成.那么,RabbitMQ如何使用RPC呢?在本篇 ...

  7. 谈谈Ext JS的组件——组件基类:Ext.Component

    概述 Ext.Component是所有Ext组件的基类,这在Ext.Component的API中第一句话就提到了.然后第二段说明了它包含的基本功能:隐藏/显示.启用/禁用以及尺寸控制等.除了以上这些基 ...

  8. Chipmunk僵尸物理对象的出现和解决(三)

    首先是触摸移动反弹棒的代码: -(void)touchMoved:(CCTouch *)touch withEvent:(CCTouchEvent *)event{ CGPoint location ...

  9. Eclipse下载GitHub源码

    1. 可以通过Eclipse->File->Import->Project from Git->URI来提取工程   2. 也可以通过打开git仓库视图(Eclipse 自带了 ...

  10. 《java入门第一季》之面向对象(抽象类其实不抽象)

    上一篇(http://blog.csdn.net/qq_32059827/article/details/51334198)对抽象类做了一些描述,这一篇根据两个案例加深一下印象.会觉得抽象类其实不抽象 ...