Github

showOnHover

Simple small 1 kb jQuery Plugin for create a hover effect.

Download

How to use:

Call the plugin on the set of elements to add the effect.

Options:

$(selector).showOnHover(options);

$('elem').showOnHover({
       fx: 'fade',
       easingIn: 'swing',
       easingOut: 'swing',
       durationIn: 400,
       durationOut: 400,
       enter: function,
       complete: function,
       out: function,
       end: function
});

Example:

Hover the image to star the animation.

						var log = $('.log');
						
$('.showOnHover').showOnHover({
						
      	fx: 'rt',
						
      	durationIn: 600,
						
      	durationOut: 1200,
						
      	easingIn: 'easeOutBounce',
						
      	easingOut: 'easeInOutElastic',
						
      	enter: function(a){log.html('Animation In started ...');}, 
						
      	complete: function(){log.html('Animation In completed.');},
						
      	out: function(){log.html('Animation Out started ...');},
						
      	end: function(){log.html('Animation Out completed.');} 
						
});
					
									<div>
						
   			<img src="http://lorempixel.com/200/200/abstract"/>
						
   			<div class="showOnHover">
						
      				<img src="http://lorempixel.com/200/200/fashion"/>
						
   			</div>
						
		</div>

Effects:

't' = top, 'b' = bottom, 'l' = left, 'r' = right, 'fade', 'hide'.
You can use any valid pair of position fx, example: 't', 'tr', 'rt', 'r', 'rb', 'br', 'b', 'bl', 'lb', 'l', 'lt', 'tl'.
You can't mix 'fade' and 'hide' with position fx in the options.

Easing:

For more advanced easing options you can use the Easing Plugin which is used in the example.

Legal:

Author & copyright (c) 2013: Masquerade Circus
Dual MIT & GPLv2 license