Javascript 使用jQuery在数组中的元素中设置动画

我正在开发一个jQuery插件，它隐藏容器中的所有元素，然后使用fadeIn（）或jQuery的animate函数在设定的时间间隔内显示它们

到目前为止，我已经设法将所有元素放入一个数组，如果我这样做，我可以在警报中打印出html

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

然而，当我尝试再次将元素作为html添加到文档中时，我没有得到任何运气

我试过了

$(container).append(this);

及

但还是没有运气

理想情况下，我需要的是能够再次fadeIn（）每个元素，并在设定的时间间隔内向每个元素添加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);

有人这样想吗

Edit-插件的第二个版本没有验证

def.onStepStart

等实际上是函数，因此如果您将它们设置为函数以外的其他值，它将中断。

有人这样想吗？：

---

---

编辑-插件的第二个版本没有验证

def.onStepStart

等实际上是函数，因此如果将它们设置为函数以外的其他值，它将中断。

$（此）。选择器

听起来不对，它做了什么？返回插件附加到的元素的选择器。所以在我的html中有$（'.loader'）.myPlugin（）；如果您只想显示/隐藏元素，为什么还要尝试附加这些元素？因为我想显示它们并添加css类。我的最终目标是能够有一个插件，能够在可设置的时间间隔内通过动画很好地加载div中的元素。

$（此）。选择器对我来说听起来有点错误，它做什么？返回插件附加到的元素的选择器。所以在我的html中有$（'.loader'）.myPlugin（）；如果您只想显示/隐藏元素，为什么还要尝试附加这些元素？因为我想显示它们并添加一个css类。我的最终目标是能够有一个插件，在可设置的时间间隔内通过动画很好地加载div中的元素。是的，但也能够添加css类。类似于
loader.eq（index.addClass（'foo'，function（）{fadeLoop（index+1）；}）
addClass
不接受回调。是否要在淡入淡出（当前项目）开始时或淡入淡出结束时添加类？淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡。好吧，那么它不工作仅仅是因为它不接受回调？很好，如果你能把它作为一个答案，我会接受。谢谢很公平。不要忘记
$.noop
是的，但也可以添加css类。类似于
loader.eq（index.addClass（'foo'，function（）{fadeLoop（index+1）；}）
addClass
不接受回调。是否要在淡入淡出（当前项目）开始时或淡入淡出结束时添加类？淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡。好吧，那么它不工作仅仅是因为它不接受回调？很好，如果你能把它作为一个答案，我会接受。谢谢很公平。不要忘记
$.noop
(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);

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

(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