0

我使用 jquery .hide 隐藏父 div 内的“额外细节” div，当用户将鼠标悬停在其父级上时，它会出现，使用 .show/.toggle（jquery-ui 幻灯片）

我遇到的问题是我使用 {position:absolute; 将“额外细节” div 定位在其父级的底部。bottom:0px;} （并使用 .hide 隐藏它）当您在 chrome 和 safari（均为 osx）中将鼠标悬停在它上面时，它会滑出，但是一旦完全显示它就会从顶部滑出然后跳到底部。

在 Firefox osx 中它工作正常。

我遇到的另一个问题是，如果你在它上面来回移动鼠标大约 5 秒钟，它似乎真的很困惑，以至于它即使没有悬停在显示的位置上。

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

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

4

2 回答 2

1

改变

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

到

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

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

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

于 2012-05-02T21:27:02.623 回答
1

我会用这个

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

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

简单，不会反弹或弹出，并且在 osx firefox 和 osx safari 中为我工作。

于 2012-05-03T03:06:05.430 回答