动画队列主要用到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. gauss消元

    题意描述:有n个星球,m台望远镜.每台望远镜有一个开始时间和结束时间,但只给出了月.日的信息,没有给出年份,每台望远镜记录了它所观测的星球上发生的各类事件的次数.每类事件持续的时间是恒定的,且不会超过 ...

  2. 泛型、Linq 查询使用

    查询类对象数组中符合条件的一个实例对象 泛型自带查询方法: EntityErpFldMx ms = aryFldMx.Where(i => i.Jhd == "4900120121&q ...

  3. MYSQL C API : mysql_real_escape_string 二进制数据存储

    #include <iostream> #include <string> #include <string.h> #include <mysql.h> ...

  4. jQuery MiniUI 开发指南+API组件参考手册

    jQuery MiniUI 开发指南 本文档将逐步的讲解jQuery MiniUI的方方面面,从此您将踏上jQuery MiniUI的深入探索之旅.                 1.Hello M ...

  5. noip2007解题报告

    T1.统计数字 给出n个数,统计每个数字出现的个数. n小,快排解决. T2.字符串的展开 给出一个字符串,其中形如 d-h,4-9之类的就展开,(前面比后面小的保留,相等也是),三个参数,P1表示大 ...

  6. 纸上谈兵：左倾堆（leftist heap）

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们之前讲解了堆(heap)的概念.堆是一个优先队列.每次从堆中取出的元素都是堆中 ...

  7. openldap主机访问控制（基于用户组）

    建立组织单元 cat << _EOF_ | ldapadd -x -W -H ldaps://master.local -D cn=manager,dc=suntv,dc=tv dn: o ...

  8. ubuntu 13.04 lighttped mysql php

    apt-get update sudo apt-get install lighttpd php5-cgi Enable the fastcgi module and the php configur ...

  9. Timus Online Judge 1001. Reverse Root

    Input The input stream contains a set of integer numbers Ai (0 ≤ Ai ≤ 1018). The numbers are separat ...

  10. 在一般处理文件中访问Session需要添加IRequiresSessionState（转载）

    原文:http://blog.csdn.net/cdsnaspnet/article/details/5695625s 通常我们经常,通过session判定用户是否登录.还有一些临时的.重要的数据也尝 ...