Question

Im using jquery .hide to hide an “extra deatils” div inside of a parent div, when the user hovers over its parent it appears, using .show/.toggle (jquery-ui slide)

The problem im having is that ive positioned the “extra details” div at the bottom of its parent using {position:absolute; bottom:0px;} (and hiden it using .hide) when you hover over it in chrome and safari (both osx) it slides out but from the top once its fully shown it then jumps to the bottom.

In firefox osx it works fine.

The other problem im having is that it if you run your mouse back and forth over it for about 5 seconds it seems to get really confused to the point where it stays in the shown position even when not being hovered over.

Ive made a jsfiddle http://jsfiddle.net/pWaMx/

Any ideas what might be causing these problem ?

Answer 1

Change

$('.box').toggle("slide", {
    direction: "down"
}, 350);

to

$('.box').stop(true, true).toggle("slide", {
    direction: "down"
}, 350);

I’d also suggest hiding .box in your CSS.

Updated jsFiddle: http://jsfiddle.net/pWaMx/3/