jQuery Lesson Series: How to Implement Your First Plugin

Building a jQuery plugin is relatively easy if you know the basics. In this article we are going to build a simple plugin which highlights (actually blinks) the link, paragraph, span or any text element on the page.

For a printable reference guide to the jQuery API I suggest you to download this interesting jQuery Visual Cheat Sheet designed by Antonio Lupetti or take a look at the official jQuery documentation.

How to start implementing a plug-in

First start with an empty jQuery plugin template.

(function($){
    $.fn.woorkBlink = function(){
        // all plugin stuff will be here
    };
})(jQuery);

I always start with this structure and fill the blanks as the building goes on. In details, first and last lines are for registering our plugin to jQuery. Our actual plugin starts with the second line. $.fn.woorkBlink defines the plugin name. So you can call it as $(target).woorkBlink();.

After naming the plugin, we need to find all target elements in our page by using each() function. each() executes the called function for every target element in the page.

return this.each(function(){
    var $e = $(this);
});

where $(this) means the target elements in the page and by defining a variable $e, we call the target element freely everywhere in the plugin. This finishes the needed setup for plugin. Now lets blink our texts.

Blinking is a repeating action which executes a certain function in a defined time interval, lets say in every 1.5 seconds. We need to simply create a function which adds a ‘blinking’ class to the target element, then waits for half of our interval and removes the ‘blinking’ class to complete the action. Then we repeat the function in every 1.5 seconds with setInterval() function. setInterval() function’s usage is like this

Here is the jQuery code what we are trying to do.

setInterval(function(){
    $e.addClass('blinking').animate({ opacity: 100 }, 750).queue(function(){
        $e.removeClass('blinking');
        $e.dequeue();
    });
    },
1500);

Antonio previousy mentioned about addClass(), removeClass() functions in Manipulating CSS Classes lesson and animate() function in this lesson. But the usage of animate() function is a bit different in here. I used it for only nothing but the waiting for 750 milliseconds.

There are two new functions which we were not mentioned previously, queue() and dequeue(). The queue() function, queues and waits the execution of functions until the end of previous actions. In our example, queue() function waits to removing ‘blinking’ class until the aanimate() function finished, and by ddequeue(), we removed our actions from the queue.

Overall code for the plugin is as follows;

(function($){
    $.fn.woorkBlink = function(){
    return this.each(function(){

         var $e = $(this);

        setInterval(function(){
            $e.addClass('blinking').animate({ opacity: 100 }, 750).queue(function(){
            $e.removeClass('blinking');
            $e.dequeue();
         });
    },
1500);
});
};
})(jQuery);

To spicing up our effect, add some css for different text elements like

a.blinking { color: green; }
span.blinking { color: red; }
p.blinking { color: blue; }

Resulting a blinking link will have green color, text will have red and a paragraph will blue color. The final html will look like.

Here is the CSS code:

a { color: black;  }
a.blinking { color: green; }
span.blinking { color: red; }
p.blinking { color: blue; }

Here is the JavaScript code:

$(function(){
    $(".highlight").woorkBlink();
});

(function($){
$.fn.woorkBlink = function(){
return this.each(function(){

    var $e = $(this);

    setInterval(function(){
        $e.addClass('blinking').animate({ opacity: 100 }, 750).queue(function(){
        $e.removeClass('blinking');
        $e.dequeue();
     });
},
1500);
});
};

})(jQuery);

and here is the HTML code:

<a href="http://woorkup.com" class="highlight">Woork Up</a>

<span class="highlight">This is a blinking text</span>
<span>This is a normal text</span>

<p class="highlight">Woork Up is a web community about Web Design, 
Tech News and Digital Inspiration with tutorials, code snippets, reviews 
of products and services for web designers and developers, and daily fresh 
news provided by users. Woork Up is currently available by invite only. 
<span class="highlight">This is a blinking text inside a blinking 
paragraph</span>.</p>

where all text elements with a highlight class blink by changing their color.

Demo

Woork Up

This is a blinking text
This is a normal text

Woork Up is a web community about Web Design,
Tech News and Digital Inspiration with tutorials, code snippets, reviews
of products and services for web designers and developers, and daily fresh
news provided by users. Woork Up is currently available by invite only.
This is a blinking text inside a blinking
paragraph.