在上网的时候经常会发现一些网站上发现一些bug，如导航菜单的动画队列问题（在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画

会被放到动画队列中，等前面的动画执行完成了才会执行）

要解决问题需要停止动画   stop(clearQueue, jumpToEnd)

参数clearQueue     是否清除队列

参数jumpToEnd     是否跳转到最终效果

代码实现：

 $(function () {

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

               $("div").slideDown(1000).slideUp(1000);

           });

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

                //clearQueue第一个参数：是否清除队列

                //jumpToEnd第二个参数：是否跳转到最终效果

                $("div").stop(true,true);

            });

        });

　　

<body>

<input type="button" value="开始" id="btnStart"/>

<input type="button" value="停止" id="btnEnd"/>

    <div></div>

</body>

JQuery动画队列问题的更多相关文章

  1. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  2. jQuery 动画效果 与 动画队列

    基础效果 .hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置 display 属性 $('.target').hide() ...

  3. jQuery源码分析系列(39) : 动画队列

    data函数在jQuery中只有短短的300行代码,非常不起点 ,剖析源码的时候你会发现jQuery只要在有需要保存数据的地方无时无刻不依赖这个基础设施 动画会调用队列,队列会调用data数据接口还保 ...

  4. jquery 清除动画队列不疑惑

    $(this).siblings().stop().fadeTo(200, 0.3); jquery动画存在一个队列, 会把事件产生的动画 放在一个队列中,当来不及执行这些事件队列的时候,会在事件结束 ...

  5. jQuery的动画队列

    动画队列主要用到jQuery的queue.dequeue和clearqueue. 1.queue()函数主要是将一个动画函数数组绑定到一个队列上 2.dequeue()函数主要是执行队列的第一个函数, ...

  6. jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数

    决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...

  7. Jquery自定义动画与动画队列

    animate:自定义动画 $(selector).animate({params},[speed],[easing],[callback]); params:要执行动画的css属性,它是一个对象可以 ...

  8. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  9. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

随机推荐

  1. [收集]MVC3 HTML辅助方法集录

    1.跳转链接 @Html.ActionLink("linkText","actionName",routeValues,htmlAttributes) e.g& ...

  2. [LeetCode] Convert a Number to Hexadecimal 数字转为十六进制

    Given an integer, write an algorithm to convert it to hexadecimal. For negative integer, two’s compl ...

  3. [LeetCode] Trips and Users 旅行和用户

    The Trips table holds all taxi trips. Each trip has a unique Id, while Client_Id and Driver_Id are b ...

  4. [LeetCode] Single Number 单独的数字

    Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...

  5. Servlet的生命周期

    Servlet的生命周期 Servlet的生命周期是由tomcat服务器来控制的. 1 构造方法: 创建servlet对象的时候调用.默认情况下,第一访问servlet就会创建servlet对象只创建 ...

  6. VLC 资料整理

    libvlc_media_t的创建 创建libvlc_media_t有两种方法:libvlc_media_new_path()和libvlc_media_new_location().简单描述一下这两 ...

  7. 启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法

    原因1:给定目录下jvm.dll不存在. 对策:(1)重新安装jre或者jdk并配置好环境变量.(2)copy一个jvm.dll放在该目录下. 原因2:eclipse的版本与jre或者jdk版本不一致 ...

  8. 练习JavaScript实现过滤特殊字符

    for循环遍历特殊字符和用户输入字符,然后做比较,返回结果. <script type="text/javascript"> var name = prompt(&qu ...

  9. Codeforces Round #388 (Div. 2)

      # Name     A Bachgold Problem standard input/output 1 s, 256 MB    x6036 B Parallelogram is Back s ...

  10. HTML隐藏的方法

    display:none; 表单 type="hidden" 宽高设为0 height:0;width:0; 祖先元素隐藏或在页面外 margin Visibility:hidde ...