QuantumTom(technically) creative

I’ve been using jQuery quite extensively and I recently started encapsulating my code using the jQuery plug-in design pattern. I really like the way it reads and it’s already starting to make my code both safer and more reusable.

One thing I find myself wanting to do quite frequently is to wire up the hover events to add a specific animation behaviour on mouseover and remove it on mouseout. This kind of thing fits quite nicely with jQuery’s architecture and I was able to write a nice little self-contained plug-in that does exactly that.

The official jQuery site offers us some direction on this point:

To make sure that your plugin doesn’t collide with other libraries that might use the dollar sign, it’s a best practice to pass jQuery to a self executing function (closure) that maps it to the dollar sign so it can’t be overwritten by another library in the scope of its execution.

EDIT: I’m now hosting this plugin source publicly on GitHub:

git://github.com/quantumtom/Test-jQuery-Plugin.git

[code lang="js"]

(function($) {
$.fn.addHoverFade = function(options) {
// Use the default options
// if they haven't been overridden
var myOptions = $.extend({}, $.fn.addHoverFade.defaults, options);

return $(this)
// Set the initial fade setting
.fadeTo(myOptions.fadeSpeed, myOptions.opacityStart)

// Wire up your new method
.hover(
function(){
$(this).
fadeTo(myOptions.fadeSpeed, myOptions.opacityFinish)
},
function(){
$(this).
fadeTo(myOptions.fadeSpeed, myOptions.opacityStart)
});
};

// Initialize plugin defaults
$.fn.addHoverFade.defaults = {
fadeSpeed : "medium",
opacityStart : "0.5",
opacityFinish : "1.0"
};
})(jQuery);

[/code]

So, what we’re doing is chaining a new extension to the jQuery object. We do this by calling the public reference to the jQuery object – $ – and appending to its .fn() method. What we append to it is our new plugin and we do this by defining it as a function.

Once that’s done we define a property of our new plugin; we do this by assigning it the values of a dictionary object (remember, no such thing as an associative array in JavaScript).

Lastly, we pass all this back to the internal reference of the jQuery object. Ta-dah! You’ve wired up the plugin back into jQuery.

Accessing your new jQuery Plugin’s API extension

[code lang="js"]
$(".my-html-class-attribute").addHoverFade();
[/code]

Or we can specify to override the middle-of-the-road default options:

[code lang="js"]
$("#the-example").addHoverFade({ opacityStart : "0.35", opacityFinish : "0.95", fadeSpeed : "fast" });
[/code]

TL;DR

“So, where’s the demo?”

Here: