一. 在使用animate()的时候 前面需要加上.stop()来防止移进移出的山东问题。

二.

   

1.定义： stop() 方法为被选元素停止当前正在运行的动画。

2.语法：  $(selector).stop(stopAll,goToEnd)

           参数：

                   stopAll     : 可选。规定是否停止被选元素的所有加入队列的动画。默认是 false。

                   goToEnd  : 可选。 规定是否立即完成当前的动画。 默认是false。 该参数只有 在设置了stopAll参数时才能使用。

第一个参数的意思是 是否清空动画序列， 也就是停止的是当前元素的动画效果还是后面附带的所有动画的效果，一般为false,跳过当前的动画效果，执行下一个动画效果。

第二个参数的意思是 是否将当前的动画进行到最后，意思就是 停止当前动画的时候动画效果刚好执行了一半，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候。

    
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset='utf-8'>

         <title>stop的用法案例</title>

         <style type="text/css">

             #animater{

                 width: 150px;

                 background:activeborder;

                 border: 1px solid black;

                 /*为了移动，需设置此属性*/

                 position: relative;

             }

         </style>

         <script type="text/javascript" src='/style/js/jquery-1.10.2.min.js'></script>

         <script type="text/javascript">

             $(function(){

                 $("#start").click(function(){

                     $("#box").animate({height:},"slow");

                     $("#box").animate({width:},"slow");

                     $("#box").animate({height:},"slow");

                     $("#box").animate({width:},"slow");

                 });

                 //           点击不同的button执行不同的操作

                 $('#button1').click(function(){

                     //默认参数是false，不管写一个false还是两个false还是没写false效果一样

                     $('#box').stop();

                 });

                 $('#button2').click(function(){

                     //第二个参数默认false

                     $('#box').stop(true);

                 });

                 $('#button3').click(function(){

                     $('#box').stop(false,true);

                 });

                 $('#button4').click(function(){

                     $('#box').stop(true,true);

                 });

             })

         </script>

     </head>

     <body>

         <p><input type='button' value='开始测试' id='start'></p>

         <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>

         <div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">stop运动参数测试</div>

     </body>

 </html>

随机推荐

  1. Struts2配置文件详解

    解决在断网环境下,配置文件无提示的问题我们可以看到Struts.xml在断网的情况下,前面有一个叹号,这时,我们按alt+/ 没有提示,这是因为” http://struts.apache.org/d ...

  2. M1/M2个人总结

    软件工程整个学期结束了,很开心学了这门课,在学到知识的同时也提高了自己的动手实践的能力,感觉自己在整个软件工程的各个环节中都能有所把握,可以将学到的知识运用到设计.实践更多的项目中去. M1阶段个人总 ...

  3. spark应用程序常见问题整理

    1.executor lost /java oom 通常是由于单个task内存占用过多,可以观察是哪个阶段挂的,如果类似groupbykey,可以看看是否有数据倾斜现象 如果不是,可以repartit ...

  4. CodeBlocks配置文件位置

    CodeBlock配置混乱,决定重装时,删除程序后,需将配置文件删除. 配置文件位置:C:\Users\Administrator\AppData\Roaming\CodeBlocks

  5. Android Fragment (二) 实例1

    千呼万唤始出来,今天就也写一篇Frament 的简单实例.先看效果: 一看这效果,首先我们的配置资源文件:new -->android xml -->selector --> 四个图 ...

  6. 第七篇——Mobile Apps，软件的曙光。

    作业三: ShrinkWrap (在包装盒子里面的软件,软件在CD/DVD上): Web APP (基于网页的软件): Internal Software (企业或学校或某组织内部的软件): Game ...

  7. C语言实现粒子群算法(PSO)一

    最近在温习C语言,看的书是<C primer Plus>,忽然想起来以前在参加数学建模的时候,用过的一些智能算法,比如遗传算法.粒子群算法.蚁群算法等等.当时是使用MATLAB来实现的,而 ...

  8. Ubuntu 64位下搭建ADT的种种问题

    我使用的adt版本为 adt-bundle-linux-x86_64-20140702.zip 1. Eclipse启动时提示 adb 无法加载动态链接库 libstdc++.so.6 以及  lib ...

  9. esxi 6 虚拟机安装复制

    打开VMware vSphere Client 连接到esxi服务器,选择配置-存储器, 右击存储器标识,选择浏览存储数据, 首先新建一个文件夹,用来存放系统镜像,这里新建了iso文件夹, 选择iso ...

  10. window.onload、DOMContentLoaded和$(document).ready()

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...