使用.show ignones {position：absolute;底部：0px;}在chrome＆amp; safari，在firefox中工作

Question

我使用jquery .hide来隐藏父div中的“额外deatils”div，当用户将鼠标悬停在它的父节点上时，使用.show / .toggle（jquery-ui slide）

我遇到的问题是，我使用{position：absolute;在我父母的底部定位了“额外细节”div。 bottom：0px;}（并使用.hide将其隐藏）当你将它悬停在chrome和safari（两者都是osx）上时，它会滑出但是从顶部一旦完全显示它就会跳到底部。

在firefox osx中它工作正常。

我遇到的另一个问题是，如果你在它上面来回运行你的鼠标大约5秒钟，它似乎真的很困惑，即使没有被盘旋，它仍然保持在所示的位置。

我做了一个jsfiddle http://jsfiddle.net/pWaMx/

任何想法可能导致这些问题？

Answer 1

更改

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

到

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

我还建议在您的CSS中隐藏.box。

更新了jsFiddle：http://jsfiddle.net/pWaMx/3/

Answer 2

我会用这个

http://jsfiddle.net/pabo/pWaMx/13/

$(document).ready(function() {
    $('.tile').hover(function() {
        $('.box').stop().slideToggle("350");
    });
});

简单，没有弹跳或spaz，并在osx firefox和osx safari中为我工作。