CODEWITHSUNDEEP
jqueryhtmlcssslidetoggle
Tyler Rash
Tyler Rash

Reputation: 1173

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

jsFiddle here: http://jsfiddle.net/_mtr/bvs6w

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?

Upvotes: 3

Views: 104

Answers (3)

alex
alex

Reputation: 490617

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

Upvotes: 0

Valentin Flachsel
Valentin Flachsel

Reputation: 10825

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 !

Upvotes: 3

Kevin Ennis
Kevin Ennis

Reputation: 14464

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.

Upvotes: 0

Related Questions