[jQuery] Delaying animation effects
I'm so close to getting this effect, but I just can't get there! I
have an unordered list for a navigation menu, withe li's id'd with
titles such as "infrastructure". I'm trying to get an effect where I
rollover the li with the id of "infrastructure", and the div with the
class "infrastructure" fades in.
<ul class="nav">
<li id="infrastructure">Infrastructure</li>
<li id="services">Services</ul>
<div id="submenu">
<div class="infrastructure">
<div>
<ul>
<li>Simplification</li>
<li>Storage</li>
</ul>
</div>
</div>
<div class="services">
<div>
<ul>
<li>ProfessionalServices</li>
<li>Other Services</li>
</ul>
</div>
</div>
</div>
The code I have so far (in the document.ready function of course).
$('div.infrastructure').hide();
$('div.services').hide();
$
('li#infrastructure,#submenu>div.infrastructure').hoverIntent(function()
{
$('div.infrastructure').fadeIn("fast");
return false;
},function(){
$('div.infrastructure').fadeOut("slow");
return false;
});
So, I'm trying to keep the menu visible whenever the mouse stays on
the li with id infrastructure, or div with class infrastructure.
Trying to add things like setTimeout, or .animate with a timeframe
instead, seems to defeat the functionality of having the div with
class infrastructure visible, it fades out unless you are right over a
list item.
I can't seem to find a good solution, everything works perfectly, but
moving the mouse from the li#infrastructure to div.infrastructure
causes the div to fadeOut and fade back in, causing a flicker effect.
Any help would be greatly appreciated, thanks! I don't want the
flicker at all, and I would ideally like an effect that delayed and
faded the div slowly, but reset the effect if the area gets rolled
over again. I tried putting
var t;
t = 0;
t = clearTimeout(t);
above the fadeIn effect, and
t = setTimeout(function(){$('div.infrastructure').fadeOut("slow");},
5000); to replace the fadeout effect, but that makes the div fadeout
unless your mouse is right over a list item in the div.