一. 在使用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. WebBrowser Control

    https://msdn.microsoft.com/en-us/library/aa752040(v=vs.85).aspx WebBrowser Control

  2. javascript base64 字符转换

    function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqr ...

  3. Unity3D之GUITexture的坐标体系

    Unity3D的GUITexture的坐标,其中x和y的取值在0~1之间,层次使用z来划分,值越大越靠前.

  4. jQuery---中的动画

    show():$('p').show(); show(1000) 里面加参数会让元素在显示的时候动起来 hide():$('p').hide(); hide(1000) 里面加参数让元素在隐藏的时候动 ...

  5. Java泛型学习笔记 - (二)泛型类

    1. 我们先写一个没有泛型的类Box: public class Box { private Object obj; public Box() {} public Object getObj() { ...

  6. Dojo的subscribe和publish的简单使用

    问题描述: 假设在你的页面有一个对话框,对话框中包含FilteringSelect这样的需要store的控件,在打开对话框时需要对这个控件做两件事情,一是给该控件的store填充数据,二是要给该控件设 ...

  7. Java Json Object 互转

    官方网址: http://json-lib.sourceforge.net/ 需要准备的jar包 1. json-lib-2.4-jdk15.jar        目前最新版, 下载地址  http: ...

  8. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  9. CreateFile函数详解

    CreateFile函数详解 CreateFile The CreateFile function creates or opens the following objects and returns ...

  10. RainCup_No.1

    Rain杯No.1 初见篇 本系列故事以及人名地名等纯属虚构,如有雷同,纯属巧合 在极东之地,有一个岛国,与岛国隔了一个海域有一个古老的国度,天朝.天朝T镇有个少年叫小S,故事从小S与少女Rain的相 ...