1

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

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

注意：image1 是一个 div

4

2 回答 2

1

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

于 2012-05-20T07:50:48.773 回答
0

我想我明白你在描述什么。你需要两个元素，并排放置。左侧元素将显示图像的左侧 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 处。然后，您将给每个 az-index以将它们层叠在一起。

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

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

于 2012-05-20T07:43:32.063 回答