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?

• Felix Kling: 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.

Answer 1

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

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

Answer 2

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

• aquaism: I didn't know such this method is. Thank you very much.
• SpYk3HH: No prob, that is some insight on how to begin a jquery plugin, for more, check out there docs
• Matey Yanakiev: 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.