悬停时 jQuery 淡入/淡出会导致窗口弹跳

Question

刚刚开始使用淡入/淡出 - 它可以正常工作，但有问题。我有一组包含链接的 div（即“#linki”）。每个“链接”div 的 id 都是有针对性的，因此在链接文本上悬停开/关会导致第二组堆叠 div（即“#webshoti”）中的图像/文本经历淡入 + 淡出响应。所以基本上我的页面代码包含一组 10 个 #link div（在“linkWrapper”div 内）、10 个 #webshot div（全部在“webshots”div 内占据相同位置）和 10 个 jQuery 脚本实例：

例如 html for #链接 div：

<div class="linkList1"><a href="http://www.fmc.gov.au/">Federal Magistrates Court</a></div>

例如 #webshot div：

#webshot1{
position:absolute;
right:30px;
width:500px;
height:322px;
display:none;

例如 jQuery 脚本：（

$(function(){
$('.linkList1').mouseenter(
function(){
$('#webshotText').fadeOut(200, function(){
$('#webshot1').fadeIn(450);
});
}
);
$('.linkList1').mouseleave(
function(){
$('#webshot1').fadeOut(20);
}
);
});

请注意，#webshotText 在页面加载时显示，直到任何 #link div 悬停）

可以查看此网页 此处

问题： (1.) 将鼠标悬停在“链接”div 列表中会导致窗口跳转（嘿，看 - 这是 jQuery Bounce！Doh）。 (2.) 在某些情况下，当前悬停的 #link 所针对的 #webshot 中的图像似乎正在加载，而先前定位的 #webshot 图像仍在卸载，导致传入图像（暂时）堆叠在传出图像的底部边缘下方。

我尝试将 mouseout>fadeout 设置为较短的时间（200 毫秒），但没有任何变化。我已经在代码中应用了 jQuery 图像预加载器，但没有任何变化。发生在 windows/FF4 和 IE8

有什么建议吗？非常感谢，柯克 （** 如果有任何方法可以使用数组脚本来避免需要 10 个 jQuery 脚本实例，那就加分了！）

Answer 1

这个小提琴（制作于回答这个问题）可以帮助：

这个想法是：

1. 用常规HTML绘制您需要的所有内容
2. 绝对位置您想要淡入/淡出的每个图像应用淡入
3. 淡出效果而不必担心堆叠效果（它们现在是绝对的-定位！）。

希望这有帮助。