Jquery - image，animate

Question

我不知道這是否合理，但我會盡我所能解釋。我目前有image1，它填充了我的屏幕的整個x軸。我需要使用j-query來爲這個圖像設置動畫，這樣當我點擊我的按鈕時，它會打開（想到某個人打開閉合的窗簾，左側和右側將拉到兩側），以便顯示image2。

即時通訊要求的是，可以j-查詢這樣的動畫？叫什麼方法/效果？現在image2在image1下面，我怎麼能得到image2在image1後面？或者這是另一種方式，image2需要在html中，而image1是在它的頂層？

note：image1 is div

Answer 1

我想我明白你在描述什麼。您需要兩個並排放置的元素。左邊的元素將顯示圖片的左側50％，右側的元素將顯示右側的剩餘50％。然後，您將在屏幕外製作這些動畫。左邊的寬度向左移動，右邊的寬度向右移動，顯示下方的圖像。

單元素：

 
            IMG Element 
+-------------------------------------------------------------------------------+ 
|         FULL IMAGE         | 
+-------------------------------------------------------------------------------+ 

兩個元素：

 
       Element A         Element B 
+----------------------------------------++-------------------------------------+ 
|    LEFT 50% IMG    L || R   RIGHT 50% IMG   | 
+----------------------------------------++-------------------------------------+ 
<---- Animate Off Left         Animate Off Right ----> 

動畫後：

 
---+-------------------------------------------------------------------------+--- 
L |        Second Image        | 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-索引的元素。然後，您會將最近動畫元素的z-index更改爲比最低值小1，然後將其left和right項返回到其原始位置。

然後用新顯示的列表項重複上一步。

Answer 2

你的意思是這樣的：​​