JQuery 队列问题

Question

我在 JQuery 队列工作时遇到了一些严重的问题。所有定义的函数都立即执行，所以 class 变化发生在动画之前——我们希望它淡出，然后改变 class，然后淡入。

function animatePlusMinus(){
    if ($(this).hasClass("ui-icon-minus")) {
        $(this).queue("goPlus",function(next) {
                $(this).fadeOut(500);
                next();
            })
            .queue("goPlus", function (next) {
                $(this).removeClass("ui-icon-minus").addClass("ui-icon-plus").fadeIn(500);
            })
            .dequeue("goPlus");

    } else if ($(this).hasClass("ui-icon-plus")) {
        $(this)
            .queue("goMinus", function (next) {
                $(this).fadeOut(500);
                next();
            })
            .queue("goMinus", function (next) {
                $(this).removeClass("ui-icon-plus").addClass("ui-icon-minus").fadeIn(500);
            })
            .dequeue("goMinus");
    }
}

我可以用 fadeOut 上的回调函数来做这个简单的例子，但是我想以一种需要适当队列的方式扩展这个逻辑。我还需要学习如何使用 .queue()!

更新：Here is an JSFiddle

Answer 1

现在，您在开始衰落后立即呼叫 next。

一个解决方案是将 next 作为回调传递给 fadeOut:

function animatePlusMinus(){
    if ($(this).hasClass("ui-icon-minus")) {
        $(this).queue("goPlus",function(next) {
                $(this).fadeOut(500, next);
            })
            .queue("goPlus", function (next) {
                $(this).removeClass("ui-icon-minus").addClass("ui-icon-plus").fadeIn(500);
            })
            .dequeue("goPlus");

    } else if ($(this).hasClass("ui-icon-plus")) {
        $(this)
            .queue("goMinus", function (next) {
                $(this).fadeOut(500, next);
            })
            .queue("goMinus", function (next) {
                $(this).removeClass("ui-icon-plus").addClass("ui-icon-minus").fadeIn(500);
            })
            .dequeue("goMinus");
    }
}

但是，如果您正在寻找更通用的解决方案，您最好深入研究 promises 而不是队列。在这里，通过 jQuery 的承诺实现，您可以

function animatePlusMinus(){
    if ($(this).hasClass("ui-icon-minus")) {
        $(this).fadeOut(500).promise().then(function(){
            $(this).removeClass("ui-icon-minus").addClass("ui-icon-plus").fadeIn(500);
        });
    } else if ($(this).hasClass("ui-icon-plus")) {
        $(this).fadeOut(500).promise().then(function(){
            $(this).removeClass("ui-icon-plus").addClass("ui-icon-minus").fadeIn(500);          
        });
    }
}

JQuery 队列问题

JQuery Queue issues

javascript

jquery

jquery-animate

jquery-ui-accordion

jquery-queue