javascript - 使用自定义队列按顺序抛出 Jquery 事件

Question

除了事件之间的其他内容之外，我还有一系列动画要做……我想知道是否可以为此使用自定义队列。我知道我可以使用其他东西，比如 setTimeout 或使用回调......但是队列会很方便，所以我可以通过 out 函数使用它而不弄乱动画（出于好奇......）

我在想类似的事情：

$("#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");

谢谢 =)

Answer 1

//可以在jquery animate中使用动画完成参数。

$("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");

jsFiddle

Answer 2

$("#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");