Javascript JQuery队列问题

我在处理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（）

---

更新：

现在，您在开始淡入淡出后立即调用

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");
    }
}

但是，如果您正在寻找一个更通用的解决方案，您可能最好深入研究而不是排队。在这里，通过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);          
        });
    }
}

---

如果没有

dequeue

，队列根本不会启动。如果没有

next

，则不会移动到下一个函数。谢谢！我知道这会很愚蠢。Promissions界面在未来看起来很有希望*但在浏览器上的支持似乎还不够广泛*（呵呵）@Jess现在我不建议在浏览器中使用Promissions（我在node/io.js上经常使用它），但在可用时使用jQuery Promissions（例如在这里或在ajax查询中）是朝着正确方向迈出的一步，并立即使您的代码更干净。@Jess:fyijquery承诺在jQuery工作的所有浏览器上都能工作（这几乎就是一切）。使用队列要复杂得多，因为

dystroy

showsI假设JQuery有自己的机制？据我所见，本地javascript承诺还没有得到很好的支持