一. 在使用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. css 之 文本缩进属性(text-indent)

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 文本缩进属性(text-indent) 这个属性设定文本 ...

  2. C#中IQueryable和IEnumberable的区别

    IQueryable和IEnumberable的区别主要在查询方面有区别 IQueryable查询时间是先把skip和Take翻译成sql语句,去数据库执行完成后把数据加载到内存中 IEnumbera ...

  3. asp.net生成随机密码

    public string RandCode(int n) { char[] arrChar = new char[]{ 'a','b','d','c','e','f','g','h','i','j' ...

  4. a链接的四种状态

    四种状态:hover.link.active.visible a:link{color:#fff;} a链接初始化 a:hover{color:yellow;} 把鼠标放上去的状况 a:active{ ...

  5. SharePoint 2013 CSOM 对象模型属性包

     博客地址:http://blog.csdn.net/FoxDave 虽说是翻译,但是并没什么翻译的,主要内容就是说有一些能通过Server API配置的Site/Web属性在CSOM中找不到,其 ...

  6. 源码编译安装 MySQL 5.5.x 实践

    1.安装cmakeMySQL从5.5版本开始,通过./configure进行编译配置方式已经被取消,取而代之的是cmake工具.因此,我们首先要在系统中源码编译安装cmake工具. # wget ht ...

  7. class can not be find with platformType:1 step 1

    使用第三方库的时候 (配合cocopods)混合使用一定要注意 为什么会出现这样的问题... 苦苦难为我半天时间 都有想打人的冲动 前天一切正常今天出来个这 原因很简单当使用cocopods的时候默认 ...

  8. 优化mysql运行环境的方法

    Mysql优化已经讲过很多篇教程了,而且网上也很多相关内容,但是本文我们是讲Linux下Mysql运行环境如何进行优化,有些地方与以往有所不同,也具有参考价值.具体mysql教程 如下: 一.修改Li ...

  9. vector容器使用和assert断言关键字

    C++里面的容器是个比较复杂的东西,我这篇只说vector容器怎么使用,详细的网搜. vector模板类其实是一个动态数组,跟自己用new关键字创建数组一样,只不过vector会自动帮我们用new和d ...

  10. Three.js基本 Demo

    对于新手来说,几个简单的例子非常实用,偶然发现几个不错的Demo,分享给大家! Three.js基本 Demo 1.最基本的Hello World:http://stemkoski.github.io ...