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. 海量数据挖掘MMDS week6: MapReduce算法(进阶)

    http://blog.csdn.net/pipisorry/article/details/49445519 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...

  2. iOS中 UITableViewRowAction tableViewcell编辑状态下的功能 UI技术分享

    * tableView:editActionsForRowAtIndexPath: // 设置滑动删除时显示多个按钮 * UITableViewRowAction // 通过此类创建按钮 * 1. 我 ...

  3. Linux0.11 创建进程的过程分析--fork函数的使用

    /* * linux/kernel/fork.c * * (C) 1991 Linus Torvalds */ /* 注意:signal.c和fork.c文件的编译选项内不能有vc变量优化选项/Og, ...

  4. Android 纵向跑马灯滚动效果

    像淘宝和京东都会有跑马灯的效果,今天给大家贡献下以前项目的一个demo,各位看官,且看效果图. 我们先定义一个Bean文件,这个实体类文件主要包含标题,内容描述,以及还有跳转的链接. LampBean ...

  5. spring揭秘 读书笔记 六 bean的一生

    我们知道,Spring容器具有对象的BeanDefinition来保存该对象实例化时需要的数据. 对象通过container.getBean()方法是才会初始化该对象. BeanFactory 我们知 ...

  6. css3学习之旅-css的基本语法(1)

    后面就将要介绍css的全面语法: 1.css介绍 2.css基本语法 3.css高级语法 4.css派生选择器 5.css的id选择器 6.css类选择器 7.css属性选择器 !!!!!css介绍 ...

  7. H5学习之旅-H5的块标签的使用(9)

    块元素的基本语法 1. Html块元素 ,块元素在开始时候通常以新行开始,比如h1,p,ul 2.内联元素,通常不会以新行开始,比如a,b,img 3.html的div元素,div也被称为块元素,其主 ...

  8. OpenCV特征点检测算法对比

    识别算法概述: SIFT/SURF基于灰度图, 一.首先建立图像金字塔,形成三维的图像空间,通过Hessian矩阵获取每一层的局部极大值,然后进行在极值点周围26个点进行NMS,从而得到粗略的特征点, ...

  9. 《15个提高Google搜索的技巧》

    为了得到更加「多元化」的搜索结果,虽然 Google 目前访问起来并不是那么方便,但是仍然有很多人把它作为常用搜索引擎在使用. 其实除了最简单的关键词搜索之外,搜索引擎还提供了很多精细化的搜索功能,如 ...

  10. 《java入门第一季》之面向对象(多态练习)

    接下来经过一个例子,对多态问题加深印象: 猫狗案例. /* 多态练习:猫狗案例 */ class Animal { public void eat(){ System.out.println(&quo ...