动画队列主要用到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. C# ： Post 接收或发送XML

    项目分成两个 web(ASP.Net)用户处理请求,客户端(wpf/winform)发送请求 1.web项目 有两个页面 SendPost.aspx(单纯发送数据给客户端) 代码: public pa ...

  2. apache 配置多个虚拟主机，不同的端口

    1.在httpd.conf添加多个端口,如下 Listen 80Listen 8080 2.开启Include conf/extra/httpd-vhosts.conf 3.具体代码如下 <Vi ...

  3. 浏览器收藏夹插件-Xmarks

    Xmarks 一一 一款简约实用的浏览器书签同步插件 首先还是想吐槽一下firefox的收藏夹同步功能,感觉不实用,密钥的长度如果不是存到手机或者别的终端,压根没办法实现同步. 而且还区分了,如果两台 ...

  4. 【uTenux实验】写在开始实验之前

    1.使用的uTenux内核代码:http://www.uloong.cc/cn/download/uTenux_V1.6.00r180.zip 2.uTenux的特性: 1.微内核  2.开放源码.完 ...

  5. 非归档模式下使用Rman进行备份和恢复

    实验环境: 一.首先进行全库数据备份: 在非归档模式下,rman备份需要在mount模式下进行 SQL> select status from v$instance; STATUS ------ ...

  6. spring java 获取webapp下文件路径

    spring java 获取webapp下文件路径 @RequestMapping("/act/worldcup_schedule_time/imgdownload") @Resp ...

  7. JavaScript 判断一个对象的数据类型。

    1.isString var isString1 = function (obj){ return Object.prototype.toString.call(obj)==="[objec ...

  8. linux装载可执行程序简析

    朱宇轲 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 linux中主要 ...

  9. .Net的Excel 导出 格式设置

    添加引用:Microsoft   Excel   11.0   Object   Library ; 添加:using Microsoft.Office.Interop.Excel; 一.打开Exce ...

  10. ubuntu 13.04 lighttped mysql php

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