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

Using custon queue to throw Jquery events in order

本文关键字：Jquery 事件 顺序 custon 队列 使用      更新时间：2023-09-26

我有一系列动画要做，其中包括事件之间的其他事情......，我想知道是否可能为此使用自定义队列。我知道我可以使用其他东西，例如 setTimeout 或使用回调......但是队列会很方便，所以我可以通过功能使用它，而不会弄乱动画（出于好奇......

我在想这样的事情：

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

谢谢=）

//您可以在 jquery Animate 中使用 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");

js小提琴

$("#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");
相关文章：