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