making functions in Jquery

Question

I`m making some functions with Jquery. but I got problem.

function fader(elm,delaytime) {
    elm.each(function(index){
        $(this).css('visibility','visible').delay(delaytime*index);
        $(this).fadeIn(1500);
    });
}
fader($('.subImgs').children(),200);

It was good, and I wanted more.

$.fn.fader2 = function(elm,delaytime) {
    elm.each(function(index){
        $(this).css('visibility','visible').delay(delaytime*index);
        $(this).fadeIn(1500);
    });
}

$('.subImgs').children().fader2(200);

It doesn't work. I know something was different but I couldn't find it. anyone can help me?

Have a look at docs.jquery.com/Plugins/Authoring to learn the basics of jQuery plugin development. Your code does not work because elm has the value 200. It does not refer to the selected elements. — Felix Kling
– Felix Kling, Commented Mar 19, 2012 at 15:43

m90 · Accepted Answer · 2012-03-19 16:26:32Z

2

Your function should probably read:

$.fn.fader2 = function(delaytime) {
    return this.each(function(index){
        $(this).css('visibility','visible').delay(delaytime*index).fadeIn(1500);
    });
}

Working fiddle (slighty different code for better visibility): http://jsfiddle.net/2HMWF/

See the link from the comment above for great information on that topic: http://docs.jquery.com/Plugins/Authoring

edited Mar 19, 2012 at 16:26

answered Mar 19, 2012 at 15:53

m90

11.8k16 gold badges69 silver badges120 bronze badges

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

1 Comment

aquaism Over a year ago

Thanks for your help. short and perfect! and thanks for your comment. The doc really helps me.

SpYk3HH · Accepted Answer · 2012-03-19 17:01:25Z

1

You might also try:

(function($) {
    if (!$.myFader) {
        $.extend({
            myFader: function(elm, delaytime) {
                return elm.each(function(index){
                    $(this).css('visibility','visible').delay(delaytime*index).fadeIn(1500);
                });
            }
        });
        $.fn.extend({
            myFader: function(delaytime) {
                return $.myFader($(this), delaytime);
            }
        });
    }
})(jQuery);

This should allow both

$.myFader($('.subImgs').children(),200);

and

$('.subImgs').children().myFader(200);

answered Mar 19, 2012 at 17:01

SpYk3HH

22.6k11 gold badges73 silver badges81 bronze badges

3 Comments

aquaism Over a year ago

I didn't know such this method is. Thank you very much.

SpYk3HH Over a year ago

No prob, that is some insight on how to begin a jquery plugin, for more, check out there docs

Matey Yanakiev Over a year ago

You don't necessarily need .extend(). In fact, .extend() is slower that just saying $.fn.method = function() {}. Also, $.fn.myFader doesn't need $(this); it only needs this, because this refers to the jQuery object.

Collectives™ on Stack Overflow

making functions in Jquery

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related