DirectionAwareHoverEffect
How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
How to use
$('#da-thumbs > li').hoverdir();
// or with options
$('#da-thumbs > li').hoverdir({hoverDelay: 75, hoverElem: '.elem'});Default options
defaults: {
speed: 300, // Times in ms
easing: 'ease',
hoverDelay: 0, // Times in ms
inverse: false,
hoverElem: 'div'
}Method
show
Show the hover element, after show method is triggered, hover don't show or hide on mouseenter and mouseleave.
You have to use hide method to bind mouseenter and mouseleave.
$('#da-thumbs > li').hoverdir('show'); // Default value top
// or with a specific direction
$('#da-thumbs > li').hoverdir('show','bottom'); // Possible value top, right, bottom, lefthide
Hide the hover element and bind mouseenter and mouseleave.
$('#da-thumbs > li').hoverdir('hide'); // Default value bottom
// or with a specific direction
$('#da-thumbs > li').hoverdir('hide','top'); // Possible value top, right, bottom, leftsetOptions
Allows you to change the options while the plugin is already running
$('#da-thumbs > li').hoverdir('setOptions', options);destroy
Unbind the plugin
$('#da-thumbs > li').hoverdir('destroy');rebuild
Bind the plugin
$('#da-thumbs > li').hoverdir('rebuild');
// or with options
$('#da-thumbs > li').hoverdir('rebuild', options);Licensed under the MIT License