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

Question

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

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

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

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

任何想法？排队正确的功能呢？谢谢。

Answer 1

我用了一些梁良征共享的概念，并想出了一个简单的解决方案：

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

认为它工作得很好，让我知道如果你能看到一种方法来修剪它，欢呼吧！

Answer 2

我不知道队列，但这里是我做的时候遇到了类似的问题：

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/ < - 的jsfiddle - 它的工作原理

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();