Question

刚刚开始使用fadein / fadeout - 它正在运行但有问题。我有一组div包含链接（即'#linki'）。每个“链接”div的id被定位，以便在链接文本上悬停/关闭导致第二组堆叠div（即'#webshoti'）中的图像/文本经历fadein + fadeout响应。所以基本上我的页面代码包含一组10个#link div（在'linkWrapper'div内），10个#webshot div（所有占据'webshots'div内的相同位置）和10个jQuery脚本实例：

例如html for #link 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被悬停）

可以查看此网页HERE

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

我尝试将mouseout＆gt; fadeout设置为短时间（200毫秒）但没有变化。我在代码中应用了jQuery图像预加载器但没有变化。发生在Windows / FF4和IE8

中

有什么建议吗？谢谢你，柯克（**奖励积分，如果有任何方式我可以使用数组脚本来避免需要10个jQuery脚本实例！）

Answer 1

This fiddle（向answer question提出）可以提供帮助：

这个想法是：

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

希望这有帮助。

悬停时jQuery fadein / fadeout导致窗口反弹

1 个答案: