动画队列主要用到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. 在命令行中通过adb shell am broadcast发送广播通知

    通过命令行执行adb shell am broadcast发送广播通知. adb shell am broadcast 后面的参数有:[-a <ACTION>][-d <DATA_U ...

  2. vim全选，全部复制，全部删除

    全选(高亮显示):按esc后,然后ggvG或者ggVG 全部复制:按esc后,然后ggyG 全部删除:按esc后,然后dG 解析: gg:是让光标移到首行,在vim才有效,vi中无效 v : 是进入V ...

  3. 【转载】芯片级拆解51、AVR、MSP430、凌阳61、PIC，5种单片机，多张显微照片

    先秀一张解剖照,放大裁剪,小米1S微距拍摄,800万像素摄像头很给力!今天等待被拆的是5个单片机芯片:(1)凌阳16位单片机SPCE061A ,这是我接触的第一个单片机,最高主频49MHz,32KB的 ...

  4. visualSVN Server 设置外网可连接

    首先再根节点右键,打开属性菜单. 打开Network选项卡,在Server name一栏中填入主机域名或者是ip. 然后在创建的项目中单机或者右键,就可以得到访问地址了.

  5. EntityFramework tt模板

    http://www.cnblogs.com/hanyinglong/archive/2013/04/18/3029649.html

  6. (整理)SQL server 2012 中文乱码与5030错误

    安装2012后,一直没注意到中文的问题.直到有一天,突然发现字段内容竟然是“??”,然后一通查,原来是排序规则需要改变: 选择数据库->右键属性->选项,将排序规则改成“Chinese_P ...

  7. apache配置Options详解

    http://www.365mini.com/page/apache-options-directive.htm Options指令是Apache配置文件中一个比较常见也比较重要的指令,Options ...

  8. centos 用dvd创建yum 仓库

    环境:CentOS 6.0 默认的yum是以网络来安装的,在没有网络或者网速不佳的情况下,通过yum来安装软件是意见非常痛苦的事情.其实对于CentOS DVD来说,里面提供的软件就足以满足我们的需要 ...

  9. 从Windows 2012标准版升级到数据中心版，标准评价版本升级到标准体验版本并激活

    对于Windows 7.Windows 8操作系统,可以在图形界面中通过输入序列号,从低版本直接升级到高的版本,例如从Windows 7家庭版升级到专业版或旗舰版.而对于Windows Server ...

  10. lua 和 c

    lua程序其实本身并不能执行,它必须依靠c语言编写的解释器来解释执行,或者说解释器为lua脚本的执行,提供了一个运行环境(lua_state),其中包括函数堆栈,内存分配和回收等机制. 理论上,lua ...