jQuery animate(“left”) 在看到全宽之前不显示图像

发布于 2024-11-14 14:46:36 字数 936 浏览 8 评论 0原文

我正在构建一个非常定制的图像滚动器，它使用 animate("left") 来获得类似选取框的效果，显示一系列带有向左滚动的嵌套图像的

。它们位于

内与“宽度：960px；溢出：隐藏；”。图像使用“位置：绝对；”和 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 角色=“剪辑”>。

我尝试搜索 Google、Blekko、jQuery API 和建议的链接，但我认为我使用了错误的术语来描述我的问题。

我♥堆栈溢出。 :)

原文

I'm building a very tailored image scroller that uses animate("left") to get a marquee-like effect displaying a series of <div>s with nested images scrolling left. They are within a <div role="clip"> with "width: 960px; overflow: hidden;". The images use "position: absolute;" and z-index so that when the user uses mouseover, the gray image on top will fade and reveal the color image.

Each div will look like this:

<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>

The CSS specific to this code:

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;
}

The problem: Images that are scrolling in do not appear at all until their full width is within the <div role="clip">.

I've tried searching Google, Blekko, jQuery API, and the suggested links but I think I'm using the wrong terminology to describe my problem.

I ♥ Stack Overflow. :)

分享到QQ

分享到微博