Simple jQuery hover slide down, reverse to slide up?
Pergunta
I have the following simple slide down hover menu.
$(function(){
$('.sub-menu').hide();
$('.menu-item').hover(
function () {
var target = $(this).children('ul');
$.browser.msie ? target.show() : target.slideDown(150);
},
function () {
var target = $(this).children('ul')
$.browser.msie ? target.hide() : target.slideUp(150);
}
);
});
It slides down .sub-menu as you hover over .menu-item and slides back up when you leave, perfect.
I need it to slide up .sub-menu when you hover over .menu-item, vise versa to the above really..
I've done the obvious of swapping the slideUp and slideDown but it doesn't seem to work.
Any ideas?
Many thanks if you can :)
Solução
$(function(){
$('.menu-item').hover(
function () {
var target = $(this).children('ul');
$.browser.msie ? target.hide() : target.slideUp(150);
},
function () {
var target = $(this).children('ul')
$.browser.msie ? target.show() : target.slideDown(150);
}
);
});
Should work, though I can't test it without more code.
Basically I'm assuming .sub-menu
is already showing, so when you hover over .menu-item
you want to hide it, correct?
All that I changed was: I swapped around the two functions and removed the $('.sub-menu').hide();
that was at the beginning. It doesn't need hiding before it actually slides up.
Edit: Working on your latest example.
Check it out here: http://jsfiddle.net/GwBuj/3/
What I did is:
- Change
#button
and#slider
to classes (.button
and.slider
) - Modify the CSS accordingly, and
changed
.slider
CSS to allow for multiple buttons (You had it positioned absolutely which wouldn't allow you to see the others) - Adjust the JQuery code to work on multiple buttons
- Added another button to show you that it works