Question

我一直在阅读有关jQuery的queue（）函数的所有类型的示例，所有这些示例都只展示了一个DOM元素。

我需要的是在一个元素上运行一个事件，一旦完成就在另一个元素上运行一个事件。

我已经做了一个例子来测试这个：http://jsfiddle.net/paulmason411/4F6CE/

基本上我希望第一个块褪色，然后当第二个块褪色时。我使用嵌套方法使它工作，但它被注释掉了，而不是适合我的方法。

有什么想法吗？排队是正确的功能吗？感谢。

Answer 1

我不知道队列，但这是我在遇到类似问题时所做的事情：

var elements = [$("#box-1"), $("#box-2"), $("#box-3"), $("#box-4")];

function fadeElement(el){
    elements[el].fadeOut(3000, function () {
        if(el < elements.length){
            fadeElement(el+1);
        }
    });
}

// call once to start the ball rolling
fadeElement(0);

要向其添加更多元素，只需将它们添加到数组中即可。

http://jsfiddle.net/4F6CE/2/＆lt; - jsfiddle - 工作正常

Answer 2

我使用了梁良良分享的一些概念，并提出了一个简单的解决方案：

http://jsfiddle.net/paulmason411/4F6CE/5/

认为它运作得很好，让我知道你是否可以看到一种方法来修剪它，欢呼！

Answer 3

我认为这对你的案子来说是一个不错的解决方案：

// if you more boxes, add to [1, 2]
$(document).queue('a', $.map([1, 2], function(val){
    return function(){$('#box-' + val).fadeOut(3000, 
        function(){$(document).dequeue('a')}) // call back
    };
}));

$(document).dequeue('a');

我认为以下内容对您有所帮助

;(function(w){
w.Queue = function(){
    this.funcs = [];
    this._delay = 1000;
};
w.Queue.prototype = {
    add : function(func){
        this.funcs.push(func);
    }, 
    finalFunc: function(func){
        this._finalFunc = func;
    },
    run : function(){
        if(this.funcs.length > 0){
            var func = this.funcs.shift();
            func();
            var t = this;
            setTimeout(function(){t.run()}, this._delay);
        } else {
            if(typeof this._finalFunc == 'function')
                this._finalFunc();
        }
    }
}
})(window);

// your code from here

var q = new Queue();
q.add(function(){$('#box-1').fadeOut(3000)});
q.add(function(){$('#box-2').fadeOut(3000)});
q.run();

jQuery - 在同一队列中排队不相关的DOM元素

3 个答案: