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.
$('#da-thumbs > li').hoverdir(); // or with options $('#da-thumbs > li').hoverdir({hoverDelay: 75, hoverElem: '.elem'});
defaults: { speed: 300, // Times in ms easing: 'ease', hoverDelay: 0, // Times in ms inverse: false, hoverElem: 'div' }
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, left
hide
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, left
setOptions
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