悬停时的jQuery淡入/淡出导致窗口反弹

Question

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

例如#link div的html：

<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 悬停）

此网页可以查看HERE

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

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

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

Answer 1

This fiddle（发给answer这个question）可以帮忙：

这个想法是：

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

希望这会有所帮助。