Question

我遇到了一些使JQuery队列工作的严重问题。所有定义的函数一次执行，因此类更改发生在动画之前 - 我们希望它淡出，然后更改类，然后淡入。

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实现promises，你可以做到

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队列问题

1 个答案: