0

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);
Improve this question
13
  • $(this).selector sounds wrong to me, what does it do? Commented Jan 18, 2013 at 16:46
  • returns the selector of the element the plugin is attached to. So in my html i have $('.loader').myPlugin(); Commented Jan 18, 2013 at 16:47
  • 1
    why are you trying to append the elements if all you want to do is show/hide them? Commented Jan 18, 2013 at 16:53
  • because i want to show them and add a css class. Commented Jan 18, 2013 at 16:55
  • My end goal is to be able have a plugin that will load the elements within a div nicely with animation over a settable interval. Commented Jan 18, 2013 at 16:56

1 Answer 1

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

yes but also to be able to add a css class. so something like loader.eq(index).addClass('foo', function(){ fadeLoop(index + 1); });
addClass doesn't accept a callback. Do you want to add the class when the fade (for the current item) starts or when it finishes?
when it finishes. ok so it didnt work just because it doesnt accept a callback?
Perfect, if you could place it as an answer, ill accept. Thanks!
fair enough. Don't forget about $.noop
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.