從使用jQuery的數組中獲取元素的動畫

Question

我正在研究一個隱藏容器內所有元素的jQuery插件，然後使用fadeIn（）或jquery的動畫函數在設置的時間間隔內顯示它們。

到目前爲止，我設法讓所有的元素到一個數組，我可以，如果我做了一個警報打印出HTML

$(children).each(function (index, val) { 
    alert(this); 
}); 

然而，當我嘗試重新添加元素爲html到文件我沒有運氣。

我已經試過

$(container).append(this); 

和

$(container).appendChild(this); 

但仍沒有運氣。

我理想中需要的是能夠再次淡入每個元素，並在設置的時間間隔內爲每個元素添加一個css類。

(function($) { 

$.fn.myPlugin = function (options) { 

    // Set default options 

    var defaults = { 
     rate : '1000', 
    } 

    var options = $.extend(defaults, options); 


    // Hide all elements within parent container 
    $(this).children().hide(); 


    var container = $(this).selector; 

    // Store children in loader variable 
    var loader = $(this).children(); 


    // Put all elements into an array 

    var children = []; 

    $(loader).each(function(idx) { 
     children.push(this.outerHTML); 
    }); 


    // Iterate over array and fadeIn elements; 

    $(children).each(function (index, val) { 


    }); 


}; 

})(jQuery); 

Answer 1

Somethink這樣？：http://jsfiddle.net/zKpp2/1/

(function ($) { 
    $.fn.myPlugin = function (options) { 
     // Set default options 
     var defaults = $.extend({ 
      rate: 1000, 
     }, options); 

     // Hide all elements within parent container 
     $(this).children().hide(); 
     var container = $(this).selector; 

     // Store children in loader variable 
     var loader = $(this).children(), 
      length = loader.length; 

     (function fadeLoop(index){ 
      if (index < length) 
       loader.eq(index).fadeIn(defaults.rate, function(){ 
        $(this).addClass('foo'); // add class when done animating. 
        fadeLoop(index + 1); 
       }); 
     })(0); 
    }; 
})(jQuery); 

不過，我會推薦一些更靈活：http://jsfiddle.net/zKpp2/3/

(function ($) { 
    $.fn.myPlugin = function (options) { 
     // Set default options 
     var def = $.extend({ 
      rate: 1000, 
      onStepStart: $.noop, 
      onStepFinish: $.noop, 
      onFinish: $.noop 
     }, options); 

     // Hide all elements within parent container 
     $(this).children().hide(); 
     var container = this; 

     // Store children in loader variable 
     var loader = $(this).children(), 
      length = loader.length; 

     (function fadeLoop(index) { 
      if (index < length) { 
       def.onStepStart.apply(
       loader.eq(index).fadeIn(def.rate, function() { 
        def.onStepFinish.apply(this); 
        fadeLoop(index + 1); 
       }).get()); 
      } else def.onFinish.apply(container.get()); 
     })(0); 

     return container; 
    }; 
})(jQuery); 

，你可以使用像這樣來完成同樣的事情你想要（以及許多其他的東西）：

$("#loader").myPlugin({ 
    rate: 1000, 
    onStepStart: function(){ 
     $(this).addClass("foo"); // "this" just started fading in 
    }, 
    onStepFinish: function(){ 
     $(this).removeClass("foo").addClass("bar"); // "this" finished fading in 
    }, 
    onFinish: function(){ 
     $(this).css("background", "green"); // "this" is the original selector. 
    } 
}).css("background", "red"); // chains properly 

編輯 —插件的第二個版本不會驗證def.onStepStart等實際上的功能，因此，如果您將其設置爲除功能以外的東西會打破。