Toggler of Awesomeness

Code

$(document).ready(function(){
// This is the hovering of awesomeness
// div.panels > div.jmc_canvas
$('.panels').each(function(){
	var el = $(this);
	var canvas = $('<iv class="jmc_toggler_canvas" />');

	el.addClass('jmc_toggler');
	el.children('.panel').addClass('jmc_toggler_panel');
	el.children().wrapAll(canvas);
	canvas = el.find('.jmc_toggler_canvas'); // reset the canvas to the dom element

	// add styling
	var panels = el.find('.jmc_toggler_panel');
	var panel = $(panels.get(0));
	el.css({'position':'relative','overflow':'hidden','height':panel.height(),'width':panel.width()});
	canvas.css({'position':'absolute','top':0,'left':0,'height':2*panel.height(),'width':2*panel.width()});
	panels.css({'display':'inline-block'});
	// For IE, deal with the inline-block/float issue
	if($('#ie6,#ie7,#ie8').length > 0) { $(panels.get(1)).css({'float':'left'}); }
	// Now hover
	el.hover(
		// Hover on
		function(ev){
			var el = $(ev.currentTarget);
			var canvas = $(el.find('.jmc_toggler_canvas').get(0));
			var panels = el.find('.jmc_toggler_panel');
			var panel = $(panels.get(0));
			canvas.animate({
				left: '-='+(canvas.width()/2)
			}, panel.width(), function() {
			});
		},
		// Hover off
		function(ev){
			var el = $(ev.currentTarget);
			var canvas = $(el.find('.jmc_toggler_canvas').get(0));
			var panels = el.find('.jmc_toggler_panel');
			var panel = $(panels.get(0));
			canvas.animate({
				left: '+='+(canvas.width()/2)
			}, panel.width(), function() {
			});
		}
	);
});
});