Why is my content clipped when using .slideToggle()?

jsFiddle here: http://jsfiddle.net/_mtr/bv开发者_如何学Pythons6w

Basically I have an unordered list consisting of two elements: a title and a span of a few rows of text. The span is toggled on hover, but if the user hovers on and off too quickly, the contents are clipped. What am I missing in my jQuery to ensure that this doesn't happen and the span is always hidden or displayed properly?

---

Simply use .stop(true, true) instead of just .stop(). The first parameter is for clearQueue while the second one is for jumpToEnd, which are both false by default.

Here's your updated code.

Hope this helps !

---

That stop() that you put in there to prevent queueing...

It's basically "freezing" your spans in the middle of having their height animated. Try checking them out in Firebug or Chrome's Inspector. You'll see that they all have heights like 0.8649px.

---

You may want to remove stop() and use a plugin such as hoverIntent.