Plugin jQuery Link Nudge

Před chvílí jsem debutoval vkusnou technikou mouseover/mouseout zvanou link nudging. Začalo to verzí MooTools a krátce poté verzí jQuery. Zrovna nedávno Drew Douglass měl premiéru pluginu jQuery, jehož cílem bylo vytvořit stejný typ efektu. Dal jsem si nějaký čas na sestavení vlastní verze pluginu jQuery.

JavaScript jQuery

//Define the plugin
$.fn.nudge = function(params) {
	//set default parameters
	params = $.extend({
		amount: 20,				//amount of pixels to pad / marginize
		duration: 300,			//amount of milliseconds to take
		property: 'padding', 	//the property to animate (could also use margin)
		direction: 'left',		//direction to animate (could also use right)
		toCallback: function() {},	//function to execute when MO animation completes
		fromCallback: function() {}	//function to execute when MOut animation completes
	}, params);
	//For every element meant to nudge...
	this.each(function() {
		//variables
		var $t = $(this);
		var $p = params;
		var dir = $p.direction;
		var prop = $p.property + dir.substring(0,1).toUpperCase() + dir.substring(1,dir.length);
		var initialValue = $t.css(prop);
		/* fx */
		var go = {}; go[prop] = parseInt($p.amount) + parseInt(initialValue);
		var bk = {}; bk[prop] = initialValue;
		
		//Proceed to nudge on hover
		$t.hover(function() {
					$t.stop().animate(go, $p.duration, '', $p.toCallback);
				}, function() {
					$t.stop().animate(bk, $p.duration, '', $p.fromCallback);
				});
	});
	return this;
};

/* usages */
$(document).ready(function() {
	/* usage 1 */
	$('#nudgeUs li a').nudge();
	/* usage 2 */
	$('#nudgeUs2 li a').nudge({
		property: 'margin',
		direction: 'left',
		amount: 30,
		duration: 400,
		toCallback: function() { $(this).css('color','#f00'); },
		fromCallback: function() { $(this).css('color','#000'); }
	});
});

Udělal jsem Drewův skript trochu flexibilnější tím, že jsem vývojáři umožnil nastavit vlastnost a směr pro animaci prvku do az. Tento plugin také detekuje původní nastavení animované vlastnosti, takže je vývojář nemusí nastavovat. Pro nakopnutí také povoluji vývojáři nastavit animované zpětné volání v případě, že vývojář chce udělat opravdu kreativní věci. Můj plugin je o něco větší, ale větší velikost souboru zvyšuje hodnotu pluginu.

Máte další nápady na plugin? Sdílejte je!