Jquery - 图像，动画

Question

我不知道这是否有意义，但我会尽力解释。我目前有 image1，它填充了我屏幕的整个 x 轴。我需要使用 j-query 为这个图像设置动画，这样当我点击我的按钮时，它会打开（想想有人打开关闭的窗帘，左右两侧将被拉到两侧），以便显示 image2。

我要问的是，j-query 可以像这样动画吗？方法/效果叫什么？现在image2在image1下面，我怎样才能让image2在image1后面？或者反过来说，image2 需要在 html 中，而 image1 是分层的？

注意：image1 是一个 div

Answer 1

你的意思是这样的吗：http://web.enavu.com/demos/dual_sliding_door/

Answer 2

我想我明白你在描述什么。你需要两个元素，并排放置。左侧元素将显示图像的左侧 50%，右侧元素将在右侧显示剩余的 50%。然后，您将在屏幕外为这些设置动画。左侧将向左全宽，右侧将向右侧全宽，在它们下方显示您的图像。

单元素：

IMG 元素 +-------------------------------------------------- ------------------------------+ |全图 | +-------------------------------------------------- ------------------------------+

两个元素：

元素 A 元素 B +----------------------------------------++-------- ------------------------------+ |左 50% IMG L ||右 右 50% IMG | +----------------------------------------++-------- ------------------------------+

动画之后：

---+---------------------------------------------------------- ---------------+--- 大号 |第二张图片 | R ---+---------------------------------------------------------- ---------------+---

所以每张图片都需要两个元素来显示它们。您可以将其构建为这样的列表：

<ul id='slideshow'>
  <li><img src='foo.png' /></li>
  <li><img src='bar.png' /></li>
</ul>

使用 jQuery，您可以将列表项内容重组为以下内容：

<li>
  <div class='left'>
    <img src='foo.png' />
  </div>
  <div class='right'>
    <img src='foo.png' />
  </div>
</li>
<li>
  <div class='left'>
    <img src='bar.png' />
  </div>
  <div class='right'>
    <img src='bar.png' />
  </div>
</li>

此时，您可能希望为包含所有这些列表项的UL 设置一个固定的宽度和高度，并将它们相对于其父项设置为 0,0。然后，您将给每个人一个z-index 以将它们一层层叠加。

使用 jQuery，您可以抓取具有最高 z-index 的元素并将其 left 和 right 元素设置为屏幕外的动画，从而显示具有第二高 z-index 的元素。然后，您将最近动画元素的 z-index 更改为比最低值小 1，然后将其 left 和 right 项目返回到其原始位置。

然后对新可见的列表项重复最后的步骤。