jquery之stop()的用法

转载 2013年12月04日 13:36:29

转载:http://www.cnblogs.com/wenzichiqingwa/archive/2012/11/21/2780996.html

目的:为了 了解stop()的用法,举个例子,直观的方式看看。

实物:一个id="animater"的div包含了一段文字。(以下用animator表示实物)

动画最终的完整效果: animater向右移动800px(这个完整的过程是动画1),然后,字体逐渐变大(这个完整的过程是动画2),然后,透明度逐渐降低到0(这个完整的过程是动画3),然后透明度逐渐恢复到1(这个完整的过程是动画4),然后字体大小变为16px同时移动到距离左边界200px的位置(这个完整的过程是动画5).

操作:点击不同id的button,观看效果

HTML代码:

 

复制代码
       <div id="animater">
            stop()方法测试
        </div>
        <div id="button">
            <input type="button" id="button1" value="stop()"/>
            <input type="button" id="button2" value="stop(true)"/>
            <input type="button" id="button3" value="stop(false,true)"/>
            <input type="button" id="button4" value="stop(true,true)"/>
            
        </div>
复制代码

 

CSS代码:

 

复制代码
         #animater{
                width: 150px;
                background:activeborder;
                border: 1px solid black;
                /*为了移动,需设置此属性*/
                position: relative;
            }
复制代码

 

jquery代码:

复制代码
              //            为了看效果,随意写的动画
                $('#animater').animate({
                    'right':-800
                }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal');



        
                //           点击不同的button执行不同的操作
        
                $('#button1').click(function(){
                    //默认参数是false,不管写一个false还是两个false还是没写false效果一样
                    $('#animater').stop();
                });
                $('#button2').click(function(){
                    //第二个参数默认false
                    $('#animater').stop(true);
                });
                $('#button3').click(function(){
                    $('#animater').stop(false,true);
                });
                $('#button4').click(function(){
                    $('#animater').stop(true,true);
                });
复制代码

 

W3School上是这样的说明的:

stop(stopAll,goToEnd)

参数 描述
stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd

可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。

我的理解:

stopAll 为false时,不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时,停止所有加入队列的动画(如goToend为true,直接跳到当前动画的最终效果)。

goToend为false时,不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧),goToend为true时,允许直接跳到完成当前动画的最终末尾效果

 

每次运行页面,animater运动时,点击不同button,看到如下不同的效果(animater处在动画1时点击):

点击按钮button1(stop()),由于两个参数都是false。所以点击发生时,animater没有跳到当前动画(动画1)的最终效果,而直接进入动画2,然后动画3,4,5.直至完成整个动画。

点击按钮button1(stop(true)),由于第一个是true,第二个是false,所以animater立刻全部停止了,动画不动了。

点击按钮button1(stop(false,true)),由于第一个是false,第二个是true,所以点击发生时,animater身处的当前动画(动画1)停止并且animater直接跳到当前动画(动画1)的最终末尾效果位置,接着正常执行下面的动画(动画2,3,4,5),直至完成整个动画。

点击按钮button1(stop(true,true)),由于两个都是true,所以点击发生时,animater跳到当前动画(动画1)的最终末尾效果位置,然后,全部动画停止。

 

工作中遇到过的实际案例:

我在项目里做的一个下拉菜单,当鼠标移上去的时候就菜单显示,当鼠标离开的时候菜单隐藏

如果我快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又移出了菜单)就会产生“动画积累",当鼠标停止移动后,积累的动画还会持续执行,直到动画序列执行完毕。
 
解决方法:在写动画效果的代码前加入stop(truetrue),这样每次快速的移入移出菜单,就正常了,当移入一个菜单的时候,停止所有加入队列的动画,但是完成当前的动画(跳至当前动画的最终效果位置)

 

jquery之stop()的用法

目的:为了 了解stop()的用法,举个例子,直观的方式看看。 实物:一个id="animater"的div包含了一段文字。(以下用animator表示实物) 动画最终的完整效果: ani...
  • chinajobs
  • chinajobs
  • 2015年11月20日 10:44
  • 148

jquery之stop()的用法

目的:为了 了解stop()的用法,举个例子,直观的方式看看。 实物:一个id="animater"的div包含了一段文字。(以下用animator表示实物) 动画最终的完整效果: animate...
  • asdf1213321
  • asdf1213321
  • 2013年03月05日 16:56
  • 433

jquery之stop()的用法

query之stop()的用法 目的:为了 了解stop()的用法,举个例子,直观的方式看看。 实物:一个id="animater"的div包含了一段文字。(以下用anim...
  • luofuIT
  • luofuIT
  • 2015年01月05日 15:32
  • 524

jquery之stop()的用法

实物:一个id="animater"的div包含了一段文字。(以下用animator表示实物) 动画最终的完整效果: animater向右移动800px(这个完整的过程是动画1),然后,字体逐渐变大(...
  • dingquanjun_2011
  • dingquanjun_2011
  • 2014年03月10日 17:01
  • 405

jquery之stop()的用法

目的:为了 了解stop()的用法,举个例子,直观的方式看看。 实物:一个id="animater"的div包含了一段文字。(以下用animator表示实物) 动画最终的完整效果: ani...
  • hy_119
  • hy_119
  • 2014年07月29日 13:34
  • 215

jquery 停止动画 stop的几种用法

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt...
  • overflow_mo
  • overflow_mo
  • 2017年04月24日 11:31
  • 1436

jQuery系列2---DOM操作和事件

一、DOM操作的分类​ 一般情况下,DOM操作分三个方面:DOM Core、HTML-DOM和CSS-DOM1.1 DOM Core​ 并不是JavaScript所专有,也不仅仅只操作HTML...
  • u012468376
  • u012468376
  • 2017年03月09日 08:31
  • 392

jquery 中stop()方法总结

我们在做效果的时候有时遇到需要停止匹配元素正在进行的动画,比如,当鼠标移入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,也就是说鼠标移出后,...
  • Girl_0919
  • Girl_0919
  • 2017年08月04日 23:46
  • 247

关于jquery 的stop()方法

目的:为了 了解stop()的用法,举个例子,直观的方式看看。 实物:一个id="animater"的div包含了一段文字。(以下用animator表示实物) 动画最终的完整效果: ani...
  • xiaoya13144111
  • xiaoya13144111
  • 2016年03月10日 15:06
  • 234

jquery动画stop()方法简介

  • yzxzsp11
  • yzxzsp11
  • 2016年02月12日 19:49
  • 182
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery之stop()的用法
举报原因:
原因补充:

(最多只允许输入30个字)