JQuery mouse / mouse animation
I am trying to create a basic dropdown menu with animation and I am facing a problem where I cannot figure out how to keep the dropdown open until the mouse disappears. Is there an easy way to say this to stay open? I know I am completely wrong about the .clickme mouse function, as it will unload the menu accordingly.
If anyone can help with this particular case, I would be very grateful.
$(document).ready(function() {
$('.clickme').mouseover(function() {
$('#slidebox').animate({
top: '+=160'
}, 200, 'easeOutQuad');
});
$('.clickme').mouseout(function(){
$('#slidebox').animate({
top: '-=160'
}, 200, 'easeOutQuad')
});
});
source to share
This will bring you to you with no markup changes:
$('.clickme, #slidebox').hover(function() {
$('#slidebox').stop().animate({ top: '30px' }, 200, 'easeOutQuad');
}, function() {
$('#slidebox').stop().animate({ top: '-130px' }, 200, 'easeOutQuad');
});
Since your elements are not related to parent / child elements, it is easier to place absolute positions in the menu (it has 130px
in CSS anyway ), so there is no reason not to use the fact that it has an absolute position. Give it a try, I've tested against your site, it looks like the behavior I would like in the menu.
source to share