jQuery Question
- Started
- Last post
- 5 Responses
- duckseason
So I'm trying to get back into learning jQuery and have just been playing around with things to try and wrap my head around it. I apologize in advance as I'm sure the solution is simple. I've tried a few things that I thought would make it work with no results.
I'm fiddling with a sliding panel that would come down from the top of a page. I have a tab and on mouse enter the panel slides down and when the mouse leaves the panel it goes back up. It's close to what I'm trying to do except for one thing. How do I get it so that on mouse leave of the panel and the tab then the panel goes back up, instead of one or the other? Right now if the mouse stays over the tab as it slides down and then leaves, the panel wont slide back up.
Here's what I'm working with:
$("ul.tab").mouseenter(function...
if($('#panel').css('display... {
$("div#panel").slideDown("slow...
}
});$('#panel').mouseleave(function...
$("div#panel").slideUp("slow");
})Any help is appreciated.
- dbloc0
if display = none it's not going to show up for it to check, you may need to check for something else
- duckseason0
I had that in place to prevent the panel slideDown from triggering again if the mouse happened mouse out of the panel and back over the tab.
Before added, it would slide up and then slide back down.
- 3030
I presume that you have a div inside <li> item of list ul.tab.
So, use jquery bind to bind multiple events; bind evets to <li> items$("ul.tab li").bind({
mouseenter: function(){
$("#panel").slideDown();
},
mouseleave: function() {
$("#panel").slideUp();
}
});In your css the panel to you want to toggle - make it hidden by default (display:none);
Also - list items - add position: relative;Hope this helps you.
- "Ahaaaaa" moment.
I'll give it a shot when I get home.duckseason
- "Ahaaaaa" moment.
- 3030
Just one thing - if the behavior is awkward, try do modify the code:
$("#panel").stop().slideDown();
Same for slideUp:
$("#panel").stop().slideUp();