[jQuery] Menu animations problem

[jQuery] Menu animations problem


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title></title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css"><!--
body {
margin: 5px 5px 5px 5px;
background-color: #ffffff;
}
/* ========== Text Styles ========== */
hr { color: #000000}
body, table /* Normal text */
{
font-size: 9pt;
font-family: 'Courier New';
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
}
span.rvts1 /* Heading */
{
font-size: 10pt;
font-family: 'Arial';
font-weight: bold;
color: #0000ff;
}
span.rvts2 /* Subheading */
{
font-size: 10pt;
font-family: 'Arial';
font-weight: bold;
color: #000080;
}
span.rvts3 /* Keywords */
{
font-size: 10pt;
font-family: 'Arial';
font-style: italic;
color: #800000;
}
a.rvts4, span.rvts4 /* Jump 1 */
{
font-size: 10pt;
font-family: 'Arial';
color: #008000;
text-decoration: underline;
}
a.rvts5, span.rvts5 /* Jump 2 */
{
font-size: 10pt;
font-family: 'Arial';
color: #008000;
text-decoration: underline;
}
span.rvts6
{
font-size: 8pt;
font-family: 'arial';
font-style: italic;
color: #c0c0c0;
}
a.rvts7, span.rvts7
{
font-size: 8pt;
font-family: 'arial';
color: #0000ff;
text-decoration: underline;
}
a.rvts8, span.rvts8
{
color: #0000ff;
text-decoration: underline;
}
/* ========== Para Styles ========== */
p,ul,ol /* Paragraph Style */
{
text-align: left;
text-indent: 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.rvps1 /* Centered */
{
text-align: center;
}
--></style>
</head>
<body>

Hi all !




I am trying to create a menu like this on the front of mootools.net (although in vertical way).


My old code is based on something I've seen around interface together


with a limitQueue hack - 




<a class=rvts8 href="http://svest.org/temp/test/old/home.html ">http://svest.org/temp/test/old/home.html </a>


(it uses jQuery 1.1.x). 




However that doesn't work with jQuery 1.2.x


Now I am trying to replace the limitQueue with the new Jquery 1.2 additions - 


queue() and stop(), but I think I don't fully understand the way they work:




<a class=rvts8 href="http://svest.org/temp/test/new/home.html">http://svest.org/temp/test/new/home.html</a>


(latest jQuery)




On initial load everything looks almost fine. If I go through the menus slowly everything works fine. 


However when I go fast through the menus the bottom part of the menu disapears. I looked the whole thing with Firebug 


and it seems that when I go over a menu, it gets a overflow: hidden style. When I go slowly over it the style appears 


only for a second, but when I go fast the style stays. Why doesn't the style be removed ? :)


P.S. The 1.1.x version of jquery doesn't seem to have that kind of problem, or maybe I am doing something wrong. 


I am a little confused with the animations. I really like to achieve the smoothness of the mootools implementation.




Anyone can help ?




<span class=rvts6>-- </span>


<span class=rvts6>Best regards,</span>


<span class=rvts6> Stoyan                          </span><a class=rvts7 href="mailto:fullgarbage@gmail.com">mailto:fullgarbage@gmail.com</a>


</body></html>