动画队列主要用到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. javascript 刷新当前页面

    编辑器加载中... 1. window.location.replace(window.location.href)

  2. CentOS 6.5 安装 Python3

    1.安装环境 yum -y install gcc zlib-devel make 2.下载python版本 wget http://www.python.org/ftp/python/3.5.1/P ...

  3. python---生成随机密码

    #简短地生成随机密码,包括大小写字母.数字,可以指定密码长度 from random import choice import string #python3中为string.ascii_letter ...

  4. struts2&&Hibernate Demo1

    这篇文章和<struts1&&Hibernate Demo1>基本类似,我这里只是拷贝代码了. 最核心的代码:LoginAction.java package action ...

  5. [HTML] CSS 语法

    CSS 实例 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样 ...

  6. CRM 403错误

    1 IIS 正常 2 CRM 各项服务正常. 3  应该程序池--CRMAppPool 停止

  7. jquery是如何架构的.

    心里一直有个疑问. jquery是如何做到一个jQuery即可以当方法用比如$();又可以当对象用$.extend(); 现在总结一下吧 function method(){} var m=new m ...

  8. 第三周psp

    12号 类别c 内容c 开始时间s 结束e 中断I 净时间T 结对项目 查资料 8:40 11:22 25m 137m 结对项目 修改代码 12:10 12:40 0m 30m 结对项目 修改代码 1 ...

  9. Codeforces724D [字符串][乱搞][贪心]

    /* 不要低头,不要放弃,不要气馁,不要慌张 题意:给你一个区间长度n和一个字符串,要求在字符串中选择一些symbol使得字符串的任意长度为n的子区间都存在至少一个symbol. 任意选取symbol ...

  10. ZYB's Premutation POJ5592

    Problem Description ZYBZYBZYB has a premutation PPP,but he only remeber the reverse log of each pref ...