很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了。

stop()方法的语法结构为:

stop([clearQueue],[gotoEnd]);

参数clearQueue和gotoEnd都是可选参数,为Boolean值(true或false)。clearQueue代表是否清空未执行完的动画队列,gotoEnd代表是否直接将正在执行的动画跳转到末状态。

(1)直接使用使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。比如下面例子:

    <!-- html部分 -->
<div id="panel" style="width: 60px;height: 22px;background-color: #eee;border: 1px solid #abcdef;font-size: 12px;">呵呵</div>

<!-- 引入jquery库 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    /* js部分 */
$("#panel").hover(function() {
$(this).stop().animate({height: "150"}, 200);
},function() {
$(this).stop().animate({height: "22"}, 300);
});

  此时,在光标移入时,触发光标移入动画(在0.2秒内height变为150),在动画还没执行完的时候光标移出,则停止当前动画(可能height还未到达150),执行光标移出触发的动画(在0.3秒内height变回22)。反之亦然。

如果遇到组合动画,例如:

    $("#panel").hover(function() {
$(this).stop()
.animate({height: "150"}, 5000) //如果在此时触发了光标的移出事件
//将执行下面的动画
.animate({borderWidth: "20px"},3000); //而非光标移出事件中的动画
},function() {
$(this).stop()
.animate({width: "300"}, 2000)
.animate({fontSize: "24px"},3000);
});

  此时只用一个不带参数的stop()方法就显得力不从心了。因为stop()方法只会停止正在进行的动画,如果动画正执行在第1阶段(改变height的阶段),则触发光标移出事件后,只会停止当前的动画,并继续进行下面的.animate({borderWidth: "20px"},3000)动画,而光标移出事件中的动画要等这个动画结束后才会继续执行,这显然不是预期的结果。这种情况下stop()方法的第一个参数就发挥作用了。

(2)stop(true),此时程序会把当前元素接下来尚未执行完的动画队列清空。所以可以把上面代码改成如此代码,就能实现预期的效果。

    $("#panel").hover(function() {
$(this).stop(true)
.animate({height: "150"}, 5000) //如果在此时触发了光标的移出事件
//直接跳过后面的动画队列
.animate({borderWidth: "20px"},3000);
},function() {
$(this).stop(true)
.animate({width: "300"}, 2000)
.animate({fontSize: "24px"},3000);
});

(3)第2个参数(gotoEnd)可以用于让正在执行的动画直接到达结束时刻的状态,通常用于后一个动画需要基于前一个动画的末状态的情况,可以通过stop(false,true)这种方式来让当前动画直接到达末状态。

(4)两者结合起来stop(true,true),即停止当前动画并直接到达当前动画的末状态,并清空动画队列。

(5)注意,jQuery只能设置正在执行的动画的最终状态,而没有提供直接到达执行动画队列最终状态的方法。例如有一组动画:

    $("div.content")
.animate({width: "300"}, 200)
.animate({height: "150"}, 300)
.animate({opacity: "0.2"}, 200);

  无论怎么设置stop()方法,均无法再改变"width"或者"height"时,将此<div>元素的末状态变成300*150大小,并且设置透明度为0.2。

温馨提示:

  jQuery中的动画有show()、hide()、fadeIn()、fadeOut()、slideDown()、slideUp()、animate()等等。stop()方法对上述的动画都适用。

参考自《锋利的jQuery第二版》

jQuery停止动画——stop()方法的使用的更多相关文章

  1. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  2. jQuery停止动画finish和stop函数区别

    stop()函数直接停止动画,finish()也会停止动画同时所有排队的动画的CSS属性跳转到他们的最终值. 示例代码: <html> <head> <meta char ...

  3. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  4. jQuery animate动画 stop()方法详解~

    一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...

  5. jquery中动画特效方法

    基本特效 方法:                  说明 .show()              显示选中的元素 .hide()                隐藏选中的元素 .toggle()   ...

  6. jquery 停止动画 stop的几种用法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  8. jQuery 效果 - 动画 animate() 方法

    我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...

  9. Jquery停止动画

    stop方法 第一个参数:是否清除动画队列 true | false 第二个参数:是否跳转到动画最终效果   true | false 使用stop()方法的技巧 当下拉菜单和手风琴产生动画队列的问题 ...

随机推荐

  1. MVC @Html.DropDownList()绑定值

    Controller中: ViewBag.modules = new SelectList(集合.ToList(), "下拉框键", "下拉框值"); View ...

  2. Eclipse 复制代码保留原格式

    当代码中有折叠代码时,无法复制格式,觉得方法有2: 1.设置取消折叠 如图所示,取消勾选"Enable folding"即可,该方法一劳永逸,缺点是以后编码显示不够简洁. 2.点开 ...

  3. PHP左、右、内连接

    left join   :左连接,返回左表中所有的记录以及右表中连接字段相等的记录.right join :右连接,返回右表中所有的记录以及左表中连接字段相等的记录.inner join: 内连接,又 ...

  4. (Hibernate进阶)Hibernate基本映射(三)

    介绍Hibernate的经典内容:对象关系映射.主要介绍映射的基本概念,映射的分类,映射文件. 概念 ORM(Object Relational Mapping),即对象关系映射.它的作用就是在关系型 ...

  5. Access denied for user 'root'@'localhost' (using password:YES)

    版权所有,未经博主允许不得转载. 今天发现服务器mysql连接不上,报 can't connect to mysql server on 'root'@'ip' (61) 照例ssh到服务器,发现my ...

  6. EhCache缓存

    EhCache缓存 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. Ehcache是一种广泛使用的开源Java分布式缓 ...

  7. Hibernate部署问题总结

    出现未知实体类(- org.hibernate.MappingException: Unknown entity),找不到cfg.xml包 (org.hibernate.internal.util.c ...

  8. 【原创】android内存管理-内存泄漏原因

    转载请注明出处 http://www.cnblogs.com/weiwangnuanyang/p/5704596.html 先讲一下内存泄漏的概念:内存泄露是指无用对象持续占有内存,或者内存得不到及时 ...

  9. php创建文件并写入信息

    $myfile = fopen("c:\\newfile.txt", "w") or die("Unable to open file!") ...

  10. Objective C ARC 使用及原理

    手把手教你ARC ,里面介绍了ARC的一些特性, 还有将非ARC工程转换成ARC工程的方法 ARC 苹果官方文档 下面用我自己的话介绍一下ARC,并将看文档过程中的疑问和答案写下来.下面有些是翻译,但 ...