Javascript Jquery-图像，动画_Javascript_Jquery_Jquery Animate_Layer

Javascript Jquery-图像，动画

javascript jquery

Javascript Jquery-图像，动画,javascript,jquery,jquery-animate,layer,Javascript,Jquery,Jquery Animate,Layer,我不知道这是否有意义，但我会尽力解释。我现在有一个image1，它占据了我屏幕的整个x轴。我需要使用j-query设置此图像的动画，这样当我单击我的按钮时，它将打开（想象有人打开关闭的窗帘，左右两侧将被拉向两侧），以便显示image2 我想问的是，j-query能像这样动画吗？这种方法/效果叫什么？现在image2在image1下面，我怎样才能让image2在image1后面？或者这是另一种方式，其中image2需要在html中，而image1是在它的上面分层的注意：image1是一个div我

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

我想问的是，j-query能像这样动画吗？这种方法/效果叫什么？现在image2在image1下面，我怎样才能让image2在image1后面？或者这是另一种方式，其中image2需要在html中，而image1是在它的上面分层的

注意：image1是一个div

我想我理解您所描述的内容。需要两个元素并排放置。左侧元素将显示图像的左侧50%，右侧元素将显示右侧剩余的50%。然后，您将在屏幕外设置这些动画。左边是全宽，左边是全宽，右边是全宽，右边是全宽，下面是你的图像

单一元素：

IMG Element +-------------------------------------------------------------------------------+ | FULL IMAGE | +-------------------------------------------------------------------------------+ IMG元件 +-------------------------------------------------------------------------------+ |全像| +-------------------------------------------------------------------------------+ 两个要素：

Element A Element B +----------------------------------------++-------------------------------------+ | LEFT 50% IMG L || R RIGHT 50% IMG | +----------------------------------------++-------------------------------------+ <---- Animate Off Left Animate Off Right ----> 元素A元素B +----------------------------------------++-------------------------------------+ |左50%IMG左| |右50%IMG| +----------------------------------------++-------------------------------------+ 动画之后：

---+-------------------------------------------------------------------------+--- L | Second Image | R ---+-------------------------------------------------------------------------+--- ---+-------------------------------------------------------------------------+--- L |第二图像| 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索引

，以便将它们层层叠加

使用jQuery，您可以抓取具有最高

z索引的元素

，并将其

左

和

右

元素设置为动画，显示具有第二高z索引的元素。然后将最近设置动画的元素的

z-index

更改为比最低值小1，然后将其

left

和

right

项返回到其原始位置

然后对新显示的列表项重复最后的步骤。