Z-index问题与jQuery淡入淡出元素

Question

所以我有一个交互式图形，在其中单击一个div，它将显示该人的相关信息。我使用的是'animate'来淡化不透明度达到1的问题。问题是，当不透明度达到1时，它会跳到刚刚单击的div的后面。

这是如何将这些板之一的结构..

<div class="boardbg board1bg"> 
    <div class="rollover person-1"><img src="images/hardie.png"/></div> 
    <div class="rollover person-2"><img src="images/bernstein.png"/></div> 
    <div class="rollover person-3"><img src="images/haldane.png"/></div> 
    <div class="rollover person-4"><img src="images/cohen.png"/></div> 
    <div class="rollover person-5"><img src="images/dawson.png"/></div> 
    <div class="info person-1"> 
     <h3>hardie</h3> 
     <p>blablablablabla 
     </p> 
     <h5>click to close</h5> 
    </div> 
    <div class="info person-2"> 
     <h3>bernstein/h3> 
     <p>blablablablabla 
     </p> 
     <h5>click to close</h5> 
    </div> 
    <div class="info person-3"> 
     <h3>haldane</h3> 
     <p>blablablablabla 
     </p> 
     <h5>click to close</h5> 
    </div> 
    <div class="info person-4"> 
     <h3>cohen</h3> 
     <p>blablablablabla 
     </p> 
     <h5>click to close</h5> 
    </div> 
    <div class="info person-5"> 
     <h3>dawson</h3> 
     <p>blablablablabla 
     </p> 
     <h5>click to close</h5> 
    </div> 
    <div class="backbtn">BACK</div> 
</div> 

jQuery的工作原理是这样......

$(".rollover").click(function() { 
$(".info").css('display', 'none'); 
person = $(this).attr('class').split(' ')[1]; 
$(".info."+person).css('display', 'block'); 
$(".info."+person).animate({"opacity": "1"}, 200); 
}); 

$(".info").click(function() { 
person = $(this).attr('class').split(' ')[1]; 
$(".info."+person).animate({"opacity": "0"}, 200); 
$(".info."+person).css('display', 'none'); 
}); 

我曾尝试使用CSS的z-index属性来纠正问题但无济于事。这是否与他们都在同一个div？

如果您按照此链接并选择左上图片（Pioneers），然后点击任意图片，您可以看到一个示例。

http://thetally.efinancialnews.com/tallyassets/extramile/index.html

感谢您的帮助，我很为难

Answer 1

你.info（=信息文本）默认为position: static，但你的.rollover（=照片）是position: absolute所以他们总是在最前面。只需设置在你CSS：

.info {position: relative;} // now you're done 

BTW：

• 我无法解释为什么.info是在上面的动画中。
• z-index仅适用于位置不是静态的元素。

Answer 2

尽量不透明度值更改为0.99。