jQuery nav elements that follow mouse movement

I worked some more on the mouse tracker snippet from yesterday. I managed to smooth out the mouse following animation plus added an end animation that moves the nav button back to the middle after the mouse leaves the slider div.

There it is in action: Mouse Track 2 Demo.

Again, you need jQuery 1.3 for this to work. I’ve also added the easeInOutQuart transition on the mouseleave animation. So be sure to link the jQuery easing plug-in as well.

Here’s the code:

HTML head

HTML body

0,0

Quick Explanation of HTML/CSS

The a tags in the left & right nav element is absolutely positioned at the center of their surround slidePrev & slideNext div tags. The slide divs are then inside another div with the class of wrapslide that allows each nav slider to be absolutely positioned relative to the window.

The height of the slidePrev, slideNext and wrapslide divs, as well as the height of the enclosed a tag are used in the jQuery calculations. The rest of the code should be self-explanatory.

jQuery

/* mousetrack.js */
var yTop; // distance wrapslide is from the top of the page

jQuery.easing.def = "easeInOutQuart"; // apply easeInOutQuart easing

function mouseFollow(e, id) { // mouseFollow() is called whenever the mouse enters a nav slider, id assigned to be slidePrev or slideNext
	var mouseYPos = e.pageY - yTop; // y-coord of mouse relative to wrapslide
		$('#readout').html('yTop =' + yTop + ', e.pageY' + e.pageY + ', mouseYPos = ' + mouseYPos); // display mouse tracking data, can be removed

	var heightBox = $(id + ' a').height(); // find height of clickable a tag
	var slideHeight = $(id).height(); // height of slidePrev or slideNext, the length of the whole slide-able area
	if (mouseYPos > 0 && mouseYPos < slideHeight ) { //ensure clickable a tag does not slide off #slidePrev or #slideNext

		var boxYPos; // this will track where the top of the a tag should be
		if (mouseYPos < (heightBox / 2)) { // prevents a tag from sliding above #slidePrev when the mouse is near the top of the div
			boxYPos = heightBox / 2;	 // force a tag to stay within div
		}
		else if (mouseYPos > slideHeight - (heightBox / 2)) { // prevents a tag from sliding below div when the mouse is near the bottom of the div
			boxYPos = slideHeight - (heightBox / 2); // force a tag to stay within div
		}
		else { boxYPos = mouseYPos; } // allow a tag to follow mouse if the mouse is in the middle of the div

		$(id + ' a').stop(true, true); // stops the mouseEnd() animation, so the a tag follows the mouse without delay.
		$(id + ' a').css('top', boxYPos - (heightBox / 2)); // - (heightBox/2) puts the mouse pointer in the center of the a tag.
	}
}

function mouseEnd(id) { // mouseEnd is called when the mouse leaves the nav slider
	var slideHeight = $(id).height();
	var heightBox = $(id + ' a').height();
	$(id + ' a').animate({top: (slideHeight/2) - (heightBox/2)}, 500); // a tag will ease back to the center of the div when the mouse leaves the div area
}

$( function(){

	// grab distance wrapslide is from the top of the page
	yTop = $('div.wrapslide').css('top');
	yTop = parseInt(yTop); // strips the unit from css property (e.g. 50px becomes 50)

	// tracks mouse movement inside slider area
	$('#slidePrev').mousemove(function(e){
		mouseFollow(e, '#slidePrev');
	});
	$('#slideNext').mousemove(function(e){
		mouseFollow(e, '#slideNext');
	});

	// reset button location when pointer leaves slider area
	$('#slidePrev').mouseleave( function() {
		mouseEnd('#slidePrev');
	});
	$('#slideNext').mouseleave( function() {
		mouseEnd('#slideNext');
	});

});

I’ve added fairly detailed comments to the jQuery code… hopefully you can understand what I meant.