jQuery Link Nudge Plugin

By  on  

A while back I debuted a tasteful mouseover/mouseout technique called link nudging. It started with a MooTools version and shortly thereafter a jQuery version. Just recently Drew Douglass premiered a jQuery plugin that aimed at producing the same type of effect. I've taken some time to put together my own version of the jQuery nudging plugin.

The jQuery JavaScript

//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'); }
	});
});

I've made Drew's script a bit more flexible by allowing the developer to set the property and direction to animate the element to and from. This plugin also detects the animated property's original settings so the developer doesn't need to set it. For kicks I also allow the developer to set the animate callback in case the developer wants to do some really creative stuff. My plugin is a bit larger in size but the extra file size enhances the plugin's worth.

Have more ideas for the plugin? Share them!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    Basic AJAX Requests Using MooTools 1.2

    AJAX has become a huge part of the modern web and that wont change in the foreseeable future. MooTools has made AJAX so simple that a rookie developer can get their dynamic pages working in no time. Step 1: The XHTML Here we define two links...

  • By
    Create a 3D Panorama Image with A-Frame

    In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have. A-Frame is a community project...

Discussion

  1. Hey cool post, always keep for new jQuery plugins, consider this added to my list :-D

    Rob

  2. Cool :) Seems to lag a bit though. Probably just me.

  3. No lag for me. The most taxing part of the code is the animation so that would need to a be a jQuery issue. It likely is just you though.

  4. No lag for me either, just the thing I’ve been looking for
    Thanks!!

  5. Great stuff David, I’ll update my original post and be sure to make a note and link of this post. You’ve certainly improved a lot of the flexibility!

    Also, thanks again for giving me the idea for the plugin in the first place with your original link nudge post.

  6. Zoran

    When i first applied for job i got a task to do as a test and your Drag, Drop and Save thing helped me get the job, since then i am following your blog and you keep surprising me. Thank you for sharing stuff like this, i think nudge links are cool and it’s a good jquery plugin tutorial as well.
    Zoran from Macedonia

  7. loic

    Great! I have seen some pretty effects outside too but using other plugins: http://bit.ly/3Y9Cj4

  8. Thank You David & Drew for continuing to develop this plugin/effect!

  9. Rakesh Juyal [RJ]

    awesome :)

  10. It would be even better if it were to apply padding rather than a margin… that way it would not stutter. I realise this would change the effect slightly, but the stuttering is kind of annoying.

  11. @SeanJA – It applies the effect to the padding by default.

  12. alble

    Can i include this jquery link nudge in my template for commercial used?

  13. Does the nudging work with images?

  14. matt

    For some reason I can’t get it working… I’ve confirmed the script is loading.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!