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

Question

刚刚开始使用fadein/淡出-它的功能，但有问题。我有一组div的包含链接(即'#linki')。每个"链接"div的id是有针对性的，以便悬停在链接文本上导致图像/文本在第二组堆叠的div(即"#webshoti")经历淡出+淡出响应。所以基本上我的页面代码包含一组10个#linkdiv(在'linkWrapper'div中)，10个#webshotdiv(都在'webshots'div中占据相同的位置)和10个jQuery脚本实例:

div:

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

#webshotdiv:

#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在页面加载时显示，直到任何一个#linkdiv悬停)

此网页可在此浏览

问题:(1)悬停在"链接"div列表导致窗口跳转(嘿看-这是jQuery弹跳!)卫生署)。(2)在某些情况下，#webshot中当前被悬停的#link所瞄准的图像似乎正在加载，而先前被瞄准的#webshot图像仍在卸载，导致传入图像(暂时)堆叠在传出图像的底部边缘。

我尝试将mouseout>淡出设置为短时间(200ms)，但没有变化。我在代码中应用了jQuery图像预加载器，但没有更改。发生在windows/FF4和IE8

有什么建议吗?谢谢你，柯克(**如果有任何方法，我可以使用数组脚本，以避免需要10个jQuery脚本实例的奖励点!)

Answer 1

这个小提琴(用来回答这个问题)可以帮助:

这个想法是:

1. 用常规HTML绘制你需要的一切
2. 要渐入/渐出的图像的绝对位置
3. 应用渐变效果而不用担心叠加效果(它们现在是绝对定位的!)