动画队列主要用到jQuery的queue、dequeue和clearqueue。

1.queue（）函数主要是将一个动画函数数组绑定到一个队列上

2.dequeue（）函数主要是执行队列的第一个函数，并从队列中删除。

3.clearqueue（）函数是清除动画队列。

<!DOCTYPE html>

<html>

<head>

    <title>queue</title>

    <meta charset="utf-8">

    <script type="text/javascript" src="js/jquery.js"></script>

    <style type="text/css">

        img{

            width:400px;

            height:300px;

            position: absolute;

            bottom:100px;

            right:100px;

        }

    </style>

</head>

<body>

<!-- 设置五幅图片 -->

<div>

    <img src="img/1.jpg" alt="图片1" class="one">

    <img src="img/2.jpg" alt="图片2" class="two">

    <img src="img/3.jpg" alt="图片3" class="three">

    <img src="img/4.jpg" alt="图片4" class="four">

    <img src="img/5.jpg" alt="图片5" class="five">

</div>

<script type="text/javascript">

$(function(){

    //创建函数数组aniList，定义动画队列的执行顺序（按照函数数组的indexof）。

    var aniList = [

        function(){

            $('.one').delay(500).animate({right : "+=800px" ,bottom : "+=600"},1000,nextQueue)

        }

    ,

        function(){

            $('.two').delay(500).animate({right : "+=640px" ,bottom : "+=480"},1000,nextQueue)

        }

    ,

        function(){

            $('.three').delay(500).animate({right : "+=480px" ,bottom : "+=360"},1000,nextQueue)

        }

    ,

        function(){

            $('.four').delay(500).animate({right : "+=320px" ,bottom : "+=240"},1000,nextQueue)

        }

    ,

        function(){

            $('.five').delay(500).animate({right : "+=160px",bottom : "+=120"},1000,nextQueue)

        }

    ];

    //将队列名称定义为aniName

    $('div').queue('aniName',aniList);

    //取出动画队列aniName的第一个动画函数并执行

    var nextQueue = function(){

        $('div').dequeue('aniName');

    };

    nextQueue();

    $("<button>right</button>")

        .appendTo('body').bind("click",function(){

        //清除动画队列。

        $('div').clearQueue('aniName');

        return false;

    })

})

</script>

</body>

</html>

jQuery的动画队列的更多相关文章

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

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

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

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

  3. 深入学习jQuery动画队列

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

  4. 用队列模拟jquery的动画算法

    Aaron最近疯狂的爱上了算法研究,估计又要死伤不少脑细胞了,我喜欢捡现成的,可以省些力气.发现他写的一段源码,运行一下,还蛮好玩的,于是拿来分析一下,一来吸收下里边的营养,二来加深一下源码学习的功力 ...

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

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

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

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

  7. JQuery动画队列问题

    在上网的时候经常会发现一些网站上发现一些bug,如导航菜单的动画队列问题(在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画 会被放到动画队列中,等前面的动画执行完成了才会执行) 要解决问题 ...

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

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

  9. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

随机推荐

  1. 特效合集（原生JS代码）适合初学者

    1.返回顶部(完全兼容各个浏览器,不含美化) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...

  2. PLSQL转义字符

    http://blog.csdn.net/cunxiyuan108/article/details/5800800

  3. c#获取枚举

    在实际开发项目中,我们定义了一个枚举,往往我们需要在下拉框或其它地方展示枚举.为了加深印象,也为了帮到有需要的人,我写了一个DEMO. 第一步,我们定义一个枚举: /// <summary> ...

  4. bootstrap-面板、modal

    面板: <!-- panel 面板 panel-heading 面板头部 panel-title 面板标题样式 panel-body 面板内容 --> <div class=&quo ...

  5. iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)

                      上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...

  6. Linux进程切换代码分析

    朱宇轲 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 这次我们来分析L ...

  7. OPTIMIZE TABLE的作用--转载

    当您的库中删除了大量的数据后,您可能会发现数据文件尺寸并没有减小.这是因为删 除操作后在数据文件中留下碎片所致.Discuz! 在系统数设置界面提供了数据表优化的功能,可以去除删除操作后留下的数据文件 ...

  8. Django views 中的 shortcut function

    shortcut function都在django.shortcuts这个包中,主要包含有:render(), render_to_response(), redirect(), get_object ...

  9. Spring day02笔记

    spring day01回顾 编写流程(基于xml) 1.导入jar包:4+1 --> beans/core/context/expression | commons-logging 2.编写目 ...

  10. mongodb固定集合，建立管理员安全验证

    建立普通集合 db.createCollections aaa; 建立固定集合名称book capped true 固定集合 size大小 max:文档数量 db.createCollection(& ...