在上网的时候经常会发现一些网站上发现一些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. 有理数的稠密性(The rational points are dense on the number axis.)

    每一个实数都能用有理数去逼近到任意精确的程度,这就是有理数的稠密性.The rational points are dense on the number axis.

  2. [LeetCode] Longest Palindrome 最长回文串

    Given a string which consists of lowercase or uppercase letters, find the length of the longest pali ...

  3. [LeetCode] Find Median from Data Stream 找出数据流的中位数

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  4. [LeetCode] Missing Number 丢失的数字

    Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...

  5. [LeetCode] Maximal Square 最大正方形

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...

  6. [LeetCode] Unique Paths 不同的路径

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  7. Netty学习笔记之一（Netty解析简单的Http Post Json 请求）

    一,HTTP解码器可能会将一个HTTP请求解析成多个消息对象. ch.pipeline().addLast(new HttpServerCodec()); ch.pipeline().addLast( ...

  8. FineUI（专业版）v3.0.0 发布，手机、平板和桌面全支持！

    FineUI(专业版)v3.0.0 已经正式发布,全面支持手机.平板和桌面!       自 2008 年 4 月发布第一个版本,我们持续更新了 126 个版本,拥有 16000 多位注册用户,130 ...

  9. JavaScript面向对象的程序设计

    ECMAScript支持面对对象(oo)编程,但不使用类或接口.对象可以在代码执行过程中创建和增强,因此具有动态性而非严格定义的实体.在没有类的情况下,可以此采用下列模式创建对象. 工厂模式,使用简单 ...

  10. js获取可视区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...