Toggle Animate() in Divs in the same position

Question

I was able to do the effect of displaying a div, when hover, that is hidden and below the visible. However, the effect gets kind of "crazy" when I keep moving the mouse inside the container. Someone has a solution? =|

Full code in JSFIDDLE

Thanks!!!

Answer 1

You need to add one stop(), before the animate(), example:

$(this).stop().animate({
    top: "-200px"
}, 500);

When stop() is called in an element, the current animation is immediately stopped. If more than one animation is called on the same element, they are placed in the effect queue and the next animation will not start until the first one is completed, this avoids that unwanted effect.

Jsfiddle