QuantumTom

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

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

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

$(".my-html-class-attribute").addHoverFade();

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

$("#the-example").addHoverFade({ opacityStart : "0.35", opacityFinish : "0.95", fadeSpeed : "fast" });

TL;DR

“So, where’s the demo?”

Here: