CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
Ravan Scafi
Ravan Scafi

Reputation: 6392

Animating a list-item to a negative top makes other list-items goes down

I'm trying to apply an effect with jQuery.animate() to a list-item on mouseenter, changing top property to a negative value and also changing height, but while the animation is being done, a glitch occurs in the other elements in my list. It stops when the animation is complete.

Here's a fiddle that shows the glitch.

Notice that if the css is applied without any animation, it works as expected. Here's another fiddle.

I'm missing something? Is there a way to achieve this effect properly?

Upvotes: 1

Views: 54

Answers (1)

Ria Weyprecht
Ria Weyprecht

Reputation: 1275

This is because animate includes an overflow: hidden inline style while animating. Insert overflow: visible !important; to your style for the list items and it works fine for me (tested in firefox only)

Upvotes: 3

Related Questions