Is there a way to switch the hover js transition effect to a different transition type like fadeIn, fadeOut, or simple transitions?
Check out this link for more details.
Here is an example of the HTML code:
<img id="login-trigger" src="http://www.jointcommission.org/assets/1/6/button-login.jpg" />
<div id="login-box">
<p>Login now:</p>
Username : <input />
<br />
Password : <input />
</div>
And here is an example of the JavaScript code:
$('#login-trigger, #login-box').on({
mouseenter: function(e) {
if (e.target.id == 'login-trigger') $('#login-box').slideDown('slow');
clearTimeout( $('#login-box').data('timer') );
},
mouseleave: function() {
$('#login-box').data('timer',
setTimeout(function() {
$('#login-box').slideUp('slow')
}, 300)
);
}
});
Any ideas on how to achieve this? Your input would be greatly appreciated. Thank you!