Creating Simple Hover Fade jQuery Plugin

Since the launch of jQuery in January 2006, jQuery has quickly become the most popular and JavaScript library of choice for all web developers. There are hundreds of plugins available for almost anything you ever want to do with jQuery, you can just download and start using those wonderful plugins in your project right away. But there are times, when you just want to create your own lightweight jQuery plugin, which will do exactly the thing you want it to do and nothing more.

In this tutorial we will look at very basic of creating a jQuery Plugin, and we will step by step learn to create a plugin named hoverfade. This plugin will do just one task, fade-in and fade-out when the mouse pointer enters and leaves the elements, useful if you want to replace standard css link hover effect, and the best thing about the jQuery plugin is; it can be applied to any element we want.

Loading the Library

Let us first load jQuery library already available on Google. As we all know javascript should loaded within the head section of the document body, and right after jQuery we will load our plugin file called hoverfade.jquery.js.

1
2
3
4

Inside Plugin File “hoverfade.jquery.js”

This is jQuery code inside “hoverfade.jquery.js” file. A very simple plugin file just enough to fade in and fade out any HTML element, when the mouse pointer enters and leaves.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Writing jQuery Plugin

As you can see code inside our plugin file is very simple and already clear to the point. On load all the elements opacity is reduced to 30%, and when user hovers the mouse on the element, opacity is increased to 100% and on mouse leave opacity is reduced back to 30%.

Before you write a plugin file, you must know how your code works in a page with jQuery loaded. It’s always a good idea to start writing your code in same page something like code below, see how your code works and then implement it in a plugin :

1
2
3
4
5

You can easily create more complex plugins using jQuery methods. One thing to remember when coding jQuery plugin is to wrap your codes in :

1
2
3
4
5
6

(function($) {
$.fn.XXXX = function()
{
//Plugin stuff
}
})(jQuery);

Where XXXX should be your plugin name.

Applying the Plugin

Only thing now left to do is to apply our plugin to the elements. jQuery code below will do exactly that

1
2
3
4
5

HTML File

The complete HTML file, with jQuery library and our plugin loaded. As you may have noticed the plugin is applied to all the div element with class “fader”, which contains images inside them. You can apply this plugin to other elements as well.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="hoverfade.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fader').hoverfade();
});
</script>
<style>
.fader{float:left;margin:10px;}
</style>
</head>
<body>
<div class="fader"><img src="charlize-throne.jpg" id="image" width="100" height="100"></div>
<div class="fader"><img src="charlize-throne2.jpg" id="image" width="100" height="100"></div>
<div class="fader"><img src="charlize-throne3.jpg" id="image" width="100" height="100"></div>
</body>
</html>