jQuery - 如何编写自定义队列？-6ren

jQuery - 如何编写自定义队列？

转载作者：行者123 更新时间：2023-12-01 05:05:52

25

4

我正在尝试创建一个自定义队列，你能告诉我我做错了什么吗？

这是正在运行的代码: http://dl.dropbox.com/u/1292831/hell/index2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<link rel="stylesheet" href="style/style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<style type="text/css">
    .tester {
        background:red;
        width: 100px;
        height: 100px;
        left: 900px;
        top: 300px;
        position: absolute;
    }

    .counter {
        position: absolute;
        left: 0;
        top: 0;
        width: 150px;
        font-size: 18px;
    }
</style>

<script type="text/javascript">

    $(function(){

            // animation for the 'FX' queue:
        $('.tester').fadeOut(1000).fadeIn(1000) 


            // animation for the 'lolo' queue:
        $('.tester').queue('lolo',function(next){
            $(this).animate({left: 100}, {duration:1000})
            next()
            })

    $('.tester').queue('lolo',function(next){
            $(this).animate({left: 800}, {duration:1000})
            next()
            })
            .dequeue('lolo')
    })


    // counters
    setInterval(function(){
        var count = $('.tester').queue('fx').length
        $('.counter #c1').html(count)

        var count = $('.tester').queue('lolo').length
        $('.counter #c2').html(count)

    }, 250)

</script>


</head>
<body>

<p class="counter">
    items in the 'fx' queue <span id="c1"></span> <br />
    items in the 'lolo' queue <span id="c2"></span>
</p>

<div class="tester"></div>

</body>
</html>

最佳答案

编辑:从 jQuery 1.7 开始，animate 确实采用了一个选项来指定要添加动画的自定义队列。

<小时/>

尚不完全清楚这里的问题是什么，但我认为通过查看示例，您希望队列中的动画位于不同的队列上。

问题就在这里。 Animate 始终位于效果队列中。我不知道有什么方法可以将其放在另一个队列中。因此，您总是在自定义队列上看到 0 的原因是您在队列中排队的事情会立即完成。他们只需调用 animate(将动画放入 fx 队列)并完成即可。这也是您最初在 fx 队列中看到 4 的原因。

解决此问题的一种方法是使用 queue:false 在自定义队列中运行动画，然后在该队列中自行处理延迟。例如:

http://jsfiddle.net/jRawX/6/

    $(function(){

        // animation for the 'FX' queue:
    $('.tester').fadeOut(1000).fadeIn(1000) 


        // animation for the 'lolo' queue:
    $('.tester')
        .queue('lolo',function(next){
            $(this).animate({left: 100}, {duration:1000, queue:false, complete: next})
        })
        .queue('lolo',function(next){
            $(this).animate({left: 600}, {duration:1000, queue:false, complete: next})
        })
        .dequeue('lolo')
})


// counters
setInterval(function(){
    var count = $('.tester').queue('fx').length
    $('.counter #c1').html(count)

    var count = $('.tester').queue('lolo').length
    $('.counter #c2').html(count)

}, 250)

可能有更好的方法来做到这一点，我刚刚提出了这个。但我无法找到任何方法在不同的队列上制作动画。

编辑:略有改进，在动画回调上调用下一个。

关于jQuery - 如何编写自定义队列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5950625/

25

4

0

文章推荐： jQuery:针对不同事件使用不同的 ajaxStart 和 ajaxStop

文章推荐： java - GWT 缩放时居中对话框

文章推荐：如果已选中一定数量的复选框，JQuery 下拉列表会取消选中复选框

文章推荐： jquery - 编辑自定义

数组的文本

java - jms 队列 vs 内存中 java 队列
我遇到一种情况，我需要从某个主题读取(正在进行的)消息并将它们放入另一个 Queue 中。我怀疑我是否需要 jms Queue 或者我可以对内存中的 java Queue 感到满意。我将通过同一 jv
队列——数据结构严蔚敏C语言版
队列的定义队列(Queue):先进先出的线性表队列是仅在队尾进行插入和队头进行删除操作的线性表队头(front)：线性表的表头端,即可删除端队尾(rear)：线性表的表尾端,即可插入端由于这
Redis专题-队列
Redis专题-队列首先，想一想 Redis 适合做消息队列吗？ 1、消息队列的消息存取需求是什么？redis中的解决方案是什么？无非就是下面这几点： 0、数据可以顺序读
Python数据结构与算法（3.3）——队列
0. 学习目标栈和队列是在程序设计中常见的数据类型，从数据结构的角度来讲，栈和队列也是线性表，是操作受限的线性表，它们的基本操作是线性表操作的子集，但从数据类型的角度来讲，它们与线性表又有着巨大的不
Python Redis 队列
我想在 redis + Flask 和 Python 中实现一个队列。我已经用 RQ 实现了这样的查询，如果你有 Flask 应用程序和任务在同一台服务器上工作，它就可以正常工作。我想知道是否有可能创
用于多用户环境的 Laravel 队列
我正在使用 Laravel 5.1，我有一个大约需要 2 分钟来处理的任务，这个任务特别是生成报告...... 现在，很明显，我不能让用户在我接受用户输入的同一页面上等待 2 分钟，而是我应该在后台处
Azure 队列 - 我可以验证消息只会被读取一次吗？
我正在使用 Azure 队列，并且有多个不同的进程从队列中读取数据。我的系统的构建方式假设每条消息只读取一次。这个Microsoft article声称 Azure 队列具有至少一次传送保证，这可
multithreading - Perl线程::队列
我正在创建一个Thread::Queue元素数组。我这样做是这样的: for (my $i=0; $i new; } 但是，当我在每个队列中填充这样的元素时 $queues[$index]->enq
Mercurial 队列 - 备份和共享未提交的补丁
我试图了解如何将我的 Mercurial 补丁推送到远程存储库(例如 bitbucket.org)，而不必先应用它们(实际上提交它们)。我的动机是在最终完成之前首先对我的工作进行远程备份，并且能够与其
Mercurial 队列 - 导出补丁
我的本地计算机上有一个 Mercurial 队列补丁，我需要与同事共享该补丁，但我不想将其提交到上游存储库。有没有一种简单的方法可以打包该补丁并与他分享？最佳答案 mq 将补丁作为不带扩展名的文
Java "not removing"队列
Java 中是否有任何类提供与 Queue 相同的功能，但有返回对象的选项，并且不要删除它，只需将其设置在集合末尾？最佳答案 Queue不直接提供这样的方法。但是，您可以使用 poll 和 add
svn - svn一次全部提交(队列)？
我在Windows上使用Tortoise svn客户端，我需要能够一次提交来自不同子文件夹的更改文件-一次提交。像在提交之前将文件添加到队列中之类的？我该怎么做？ Windows上是否还有另一个svn
JAVA 队列 - 单元测试失败
好吧，我正在尝试对我的 DSAQueue 类进行单元测试，它显示我的 isEmpty()、isFull() 和 dequeue() 方法失败。以下是我的 DSAQueue 代码。我认为我的 Dequ
没有数据库查询的 laravel 队列
我想尽量减少对传入请求的数据库查询。它目前需要写入 6 个不同的表。在返回响应之前不需要完成处理。因此，我考虑了 laravel 队列，但我想知道我是否也可以摆脱写入队列/作业表所需的单独查询。我可以
Java 队列。该程序结果为空。
我正在学习队列数据结构。我想用链表创建队列。我想编程输出:10 20程序输出:队列为空-1 队列为空-1 我哪里出错了？代码如下: class Node { int x; Node next
java - 队列，优先级如何实现
“当工作人员有空时，他们会根据主题的优先级列表从等待请求池中进行选择。在时间 t 到达的所有请求都可以在时间 t 进行分配。如果两名工作人员同时有空，则安排优先权分配给最近的工作最早安排的人。如果仍然
jQuery:ESC 队列
我正在开发一个巨大的应用程序，它使用一些子菜单、模式窗口、提示等。现在，我想知道在此类应用程序中处理 Esc 和单击外部事件的正确方法。 $(document).keyup(function(e)
C 队列，按排序顺序复制元素
所以如果我有一个队列 a --> b --> NULL; 当我使用函数时 void duplicate(QueueNodePtr pHead, QueueNodePtr *pTail) 它会给 a
使用键盘输入创建 FIFO 队列
我正在尝试为键盘输入实现 FIFO 队列，但似乎无法让它工作。我可以让键盘输入显示在液晶显示屏上，但这就是我能做的。我认为代码应该读取键盘输入并将其插入队列，然后弹出键盘输入并将值读取到液晶屏幕上。有
JavaScript 队列 native
我正在学习算法和 DS。如何在 JavaScript 中使用队列？我知道你可以做这样的事情。 var stack = []; stack.push(2); // stack is now

首页

博学

6Ren·AI

商城

jQuery - 如何编写自定义队列？