我正在构建一个非常定制的图像滚动器,它使用 animate("left") 来获得类似选取框的效果,显示一系列 <div> 嵌套图像向左滚动。它们位于具有“宽度:960px;溢出:隐藏;”的 <div role="clip"> 中。图像使用“位置:绝对;” 和 z-index 以便当用户使用鼠标悬停时,顶部的灰色图像会褪色并显示彩色图像。
每个 div 将如下所示:
<div class="showcase">
<a href="#" class="showcase">
<img src="images/clients/aria_gray.png" alt="" />
</a>
<img src="images/clients/aria_color.png" width="160" class="scbg" alt="Aria" />
</div>
特定于此代码的 CSS:
div.showcase {
display: inline;
width: /* calculated by a jQuery function */
height: 70px;
position: relative;
float: left;
}
a.showcase img {
position: absolute;
z-index: 1;
}
img.scbg {
position: absolute;
z-index: 0;
}
问题:滚动的图像根本不会出现,直到它们的全宽在 <div role="clip"> 内。
我尝试搜索 Google、Blekko、jQuery API 和建议的链接,但我认为我使用错误的术语来描述我的问题。
我♥堆栈溢出。:)