jQuery Forum

What's your HTML markup?

And the default CSS:

.nav_main{
   padding:0px 10px;
   border-bottom-width:1px;
   border-bottom-style:solid;
   border-bottom-color:#AF9A6F;
   font-size:17px;
   line-height:40px;
}
.nav_sub{
   display:none;
   line-height:normal;
   font-size:13px;
   width:180px;
}
.nav_sub li{
   padding:0px 0px 10px 5px;
}

I can see how it would be hard to understand exactly what I’m talking about so here is an example:

http://www.blacksparrowonline.com/forum/example.php

You’ll see that if you mouseout before the animation finishes the next time you mouseover, the animation stops where you last mousedout.

I understand the issue; I just can't figure out how to fix it

Playing with the two optional parameters of stop() seemed to have some effect on the animations, but nothing I could really understand...

It’s frustrating because it’s so simple yet I can’t find anyone else that has had the same problem. The code is really short and clean so I don’t want a complex solution if I can avoid it.

My guess is that animate() causes JavaScript to add 1 pixel to the height in a loop until it reaches the full height of the object. Using stop() causes a break in this loop but JavaScript has reset the height already. On the next activation of that animate(), JavaScript thinks this reset height is the full height.

Who knows … maybe it’s just a jQuery bug.

No one else has had this problem?