Javascript 使用custon队列按顺序抛出Jquery事件

我有一系列的动画要做，除了事件之间的其他事情…，我想知道如果可能的话，是否可以使用一个自定义队列。我知道我可以使用其他东西，比如setTimeout或callback…但是队列会很方便，这样我就可以在函数中使用它，而不会弄乱动画（出于好奇…）

我的想法是：

$("#content")
.queue("cont_queue", function() {
    $("#backgroung").animate({
        width : "85.6%"
    },900);
}).queue("cont_queue", function() {
    $("#elem1").fadeIn(900);
}).queue("cont_queue", function() {
    do order stuf
}).queue("cont_queue", function() {
    $("#elem2").fadeIn(900);
})
.dequeue("cont_queue").delay(1000, "cont_queue")
.dequeue("cont_queue").delay(1000, "cont_queue")
.dequeue("cont_queue").delay(100, "cont_queue")
.dequeue("cont_queue").delay(1200, "cont_queue");

---

谢谢=）

//您可以在jqueryanimate中使用animation complete参数

$("something").animate( properties [, duration ] [, easing ], function() {
    //first animation is done
    $("somethingElse").animate( properties [, duration ] [, easing ], function() {
        //second animation is done and so on
    });
} )


//another option
var cont = $(".container");

animation1 = function(next) {
    setTimeout(function() {
        cont.css("background-color","black");
        if (next) {next();}
    }, 2000);
}
animation2 = function(next) {
    setTimeout(function() {
        cont.css("background-color","white");
        if (next) {next();}
    }, 2000);
}
jQuery.queue(cont,"animations",animation1);
jQuery.queue(cont,"animations",animation2);
jQuery.queue(cont,"animations",animation1);
jQuery.queue(cont,"animations",animation2);

jQuery.dequeue(cont, "animations");

---

谢谢，我想这样就可以了，但我一直在努力避免回调，而且我也想知道为什么我没有用的那个。。。在我看来，应该（可能我不太明白队列是如何工作的）你不能避免回调，因为javascript是异步的，最终你会使用回调。区别在于回调对您是“隐藏”的。您也可以查看此以了解更多信息。对不起，我表达得很糟糕，我只是想在这种情况下避开她——为了代码的和平。特别是因为如果我可以使用队列，它在我正在编写的程序上会非常方便-因为其他函数会将元素放入队列中，如果它与fx不同，这将是一件好事。这不是我想要的，但很有效。。。我只是在我的版本上加了“setTimeout”。但是我可以找出延迟不起作用的原因。如果你没有决心自己写，你可以看看Greensock的Javascript API。他们将Flash动画库移植到Javascript中，并提出了时间轴的概念，可以帮助您安排行动。您还可以研究一个Javascript异步助手（如），它可以用来构建队列（而不是回调中的回调…），谢谢您的帮助。你得到了我需要的。。。但是，我还是想知道为什么上面的方法不起作用。我的意思是，如果函数位于自定义队列中，则在我将其“出列”之前不应执行该函数。因此，如果没有延迟，它应该像正常情况下一样工作（异步），但如果有延迟，它不应该。。。（更像是好奇）你说得对。如果您使用的自定义队列的行为类似于队列，那么这段代码应该可以正常工作。如果看不到队列的代码，就很难准确地了解到底发生了什么以及为什么事情不起作用。您不能进入自定义队列代码并跟踪它以查看其中是否存在问题吗？队列函数所做的全部工作是，它形成一个函数数组，一个接一个地调用。它本身什么都不叫。它返回一个类似这样的数组[function，function，function]由你一个接一个地检查这个数组并调用函数。延迟除了下面的示例中的动画2的速记版本外，没有任何作用。它在您之前调用的函数之后向队列中添加一个setTimeout函数。因此，如果您有一个类似fadeOut（）.delay（1000）.fadeIn（）的队列，那么延迟会在队列函数列表中添加第三个函数，即[fadeOut，setTimeout，fadeIn]，并在setTimeout完成后调用fadeIn。这将为您提供延迟效果摘要（如果有人需要）：通过对内容进行排队，您将拥有一个队列，其中包含您稍后放置在那里的任何内容（使用dequeue函数）。但是，当涉及到其他元素时，假设您将一个不同元素移动的函数排入队列，该移动将进入该元素的队列，并且整体行为将类似于（异步）。延迟函数没有帮助，因为它也被放在原始队列中，它将作为settimeout调用，但其他影响将同时发生。要解决这个问题，您需要设置其他元素为获得控制而进行的移动超时。

$("#conteudo")
.queue("cont_queue", function() {
    $("#backgroung").animate({
        width : "85.6%"
    },900);
}).queue("cont_queue", function() {
    setTimeout(function(){$("#painel_subsistemas").fadeIn(900);}, 950);
}).queue("cont_queue", function() {
    carregaTopicos(sistema);
}).queue("cont_queue", function() {
    setTimeout(function(){$("#topicos_lista").fadeIn(900);}, 950);
});

$("#conteudo").dequeue("cont_queue");
$("#conteudo").dequeue("cont_queue");
$("#conteudo").dequeue("cont_queue");
$("#conteudo").dequeue("cont_queue");