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 - 编辑自定义

数组的文本

c - 如何从客户端(用 C 编写)接收 int 数组到服务器(用 python 编写)
我只想从客户端向服务器发送数组 adc_array=[w, x, y, z]。下面是客户端代码，而我的服务器是在只接受 json 的 python 中。编译代码时我没有收到任何错误，但收到 2 条警告
node.js - 如何连接我的移动应用程序(用 lua 编写)和我的服务器(用 node.js 编写)？
我是 lua 和 Node js 的新手，我正在尝试将我正在开发的移动应用程序连接到服务器。问题是它连接到服务器，但我尝试传递的数据丢失或无法到达服务器。对我正在做的事情有什么问题有什么想法吗？ th
Haskell 编写 myLength
我在这个页面上工作 http://www.haskell.org/haskellwiki/99_questions/Solutions/4 我理解每个函数的含义，看到一个函数可以像这样以多种方式定义，
Java CSV 编写
我目前正在尝试将数据写入 excel 以生成报告。我可以将数据写入 csv 文件，但它不会按照我想要的顺序出现在 excel 中。我需要数据在每列的最佳和最差适应性下打印，而不是全部打印在平均值下。这
Java - 编写、读取和修改带参数的字符串
所以，我正在做一个项目，现在我有一个问题，所以我想得到你的帮助:) 首先，我已经知道如何编写和读取 .txt 文件，但我想要的不仅仅是 x.hasNext()。我想知道如何像 .ini 那样编写、读
javascript - 编写 For 循环来计算阶乘
我正在尝试编写一个函数，该函数将返回作为输入给出的任何数字的阶乘。现在，我的代码绝对是一团糟。请帮忙。 function factorialize(num) { for (var i=num, i
Javascript，编写 if 条件的更好方法
这个问题已经有答案了: Check variable equality against a list of values (16 个回答) 已关闭 4 年前。有没有一种简洁或更好的方法来编写这个条件
aframe - 编写 A 型框架的测试规范
我对 VR 完全陌生，正在 AFrame 中为一个类(class)项目开发 VR 太空射击游戏，并且想知道 AFrame 中是否有 TDD 的任何文档/标准。有人能指出我正确的方向吗？最佳答案几乎
javascript - 编写 for 循环以使用数组创建多个方法
我正在尝试创建一个 for 循环，它将重现以下功能代码块，但以一种更具吸引力的方式。这是与 Soundcould 小部件 API 实现一起使用的 here on stackoverflow $(doc
Java 编写/编辑属性文件
我有一个非常令人困惑的问题。我正在尝试更改属性文件中的属性，但它只是没有更改... 这是代码: package config; import java.io.FileNotFoundException
aframe - 编写 A 型框架的测试规范
我对 VR 完全陌生，正在 AFrame 中为一个类(class)项目开发 VR 太空射击游戏，并且想知道 AFrame 中是否有 TDD 的任何文档/标准。有人能指出我正确的方向吗？最佳答案几乎
.net - 编写.NET互操作调试器
我正在开发一个用户模式(Ring3)代码级调试器。它还应支持.NET可执行文件的本机(x86)调试。基本上，我需要执行以下操作: 1).NET在隐身模式下加载某些模块，而没有LOAD_DLL_DEBU
python - 编写 if 语句以避免某些列表项的更好方法是什么？
我有一个列表，我知道有些项目是不必要打印的，我正在尝试通过 if 语句来做到这一点...但是它变得非常复杂，所以有没有什么方法可以在 if 语句中包含多个索引而无需打印重写整个声明。看起来像这样的东
c# - 编写 if 语句是否会以不同方式影响程序的速度和效率？
我很好奇以不同方式编写 if 语句是否会影响程序的速度和效率。所以，例如写一个这样的: bool isActive = true; bool isResponding = false; if (isA
javascript - 编写 if 语句的新方法
我在搜索网站的源代码时找到了一种以另一种方式(我认为)编写 if 语句的方法。代替: if(a)b; 或: a?b:''; 我读了: !a||b; 第三种方式和前两种方式一样吗？如果是，为什么我们要
Java + 编写 XML
我的数据采用以下格式(HashMap的列表) {TeamName=India, Name=Sachin, Score=170} {TeamName=India, Name=Sehwag, Score=
mysql - 编写 HAVING 条件的最有效方法
我目前正在完成 More JOIN operations sqlzoo 的教程，遇到了下面的代码作为#12 的答案: SELECT yr,COUNT(title) FROM movie JOIN ca
ruby - 编写 && 检查列表的更好方法？
我正试图找到一种更好的方法来编写这段代码: def down_up(array, player) 7.downto(3).each do |row| 8.times do |col
由 C++ 编写
出于某种原因，我的缓冲区中充满了乱码，我不确定为什么。我什至用十六进制编辑器检查了我的文件，以验证我的字符是否以 2 字节的 unicode 格式保存。我不确定出了什么问题。 [打开文件] fseek
c# - 编写 FizzBuzz
阅读编码恐怖片时，我刚刚又遇到了 FizzBuzz。原帖在这里:Coding Horror: Why Can't Programmers.. Program? 对于那些不知道的人:FizzBu

首页

博学

6Ren·AI

商城

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