使用jQuery对数组中的元素进行动画处理

Question

I am working on a jQuery plugin that hides all the elements within a container and then shows them over a set interval using either fadeIn() or by jquery's animate function.

So far I've managed to get all the elements into an array and I can print out the html in an alert if i do

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

However, when i try to add the elements as html again to the document i get no luck.

I've tried

$(container).append(this);

and

$(container).appendChild(this);

but still no luck.

What i need ideally, is to be able to fadeIn() each element again and also add a css class to each element over a set interval.

(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 like this?: 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);

However, I would recommend something a bit more flexible: 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);

Which you could use like this to accomplish the same thing you want (as well as many other things):

$("#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

Edit — The second version of the plugin doesn't verify that def.onStepStart etc are actually functions, so it will break if you set them to something other than a function.