jQuery animate (слева) не показывает изображения до полной ширины в поле зрения

Я создаю очень адаптированный скроллер изображений, который использует анимацию («влево»), чтобы получить эффект выделения, отображающий серию ‹div› с прокруткой вложенных изображений влево. Они находятся внутри ‹div role =" clip "› с "width: 960px; overflow: hidden;". В изображениях используется "position: absolute;" и 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 и по предлагаемым ссылкам, но мне кажется, что я использую неправильную терминологию для описания своей проблемы.

I Переполнение стека. :)