Hey all, I'm having some trouble with an animated show() and hide(). I am trying to use this for some drop down navigation. It is mostly working, except that the CSS for the drop down menu is not applied until the animation is finished. Likewise, when hiding, immediately after the animation starts the CSS is lost. When I say CSS, I mean things like the background image, borders, padding, etc.
Here is my script:
$(document).ready(function(){
$('div#globalNav > ul > li').hover(
function() { $('ul', this).show("slide", { direction: "up" }, 200); },
function() { $('ul', this).hide("slide", { direction: "up" }, 200); });
});
And here is my HTML:
<ul>
<li><a href="#">About Us</a></li>
<li>
<a href="#">Network</a>
<ul>
<li><a href="#">Architecture</a></li>
<li><a href="#">Test Servers</a></li>
<li><a href="#">Network Status</a></li>
<li><a href="#">Network Trace</a></li>
</ul>
</li>
<li>
<a href="#">Tutorials</a>
<ul>
<li><a href="#">Basic</a></li>
<li><a href="#">Intermediate</a></li>
<li><a href="#">Advanced</a></li>
</ul>
</li>
<li><a href="#">Support</a></li>
<li>
<a href="#">Downloads</a>
<ul>
<li><a href="#">Download Mumble</a></li>
<li><a href="#">Download Skins</a></li>
</ul>
</li>
<li><a href="#">FAQs</a></li>
</ul>
Here is a link to the page in question:http://64.27.51.167/home.aspx
Any help or nudge in the right direction would be greatly appreciated! I've read the API documentation but can't see where I might be going wrong :(