CSS Z索引在不透明度動畫期間發生變化

Question

我有一個非常簡單的頁面，里面有一些div堆棧，每個div都有一個圖像。

每個堆棧都會根據滾動位置淡入，頂部堆棧的對象與底部堆棧重疊，並且由於動畫過程中的某些原因，z索引會更改。

這是JSBIN，請嘗試單擊“ fadeIn / fadeOut”按鈕，然后注意在轉換時板如何短暫地移至底部堆棧的后面。

http://jsbin.com/wefediti/1/

請幫忙。

Answer 1

由於您的jQuery.each()以及淡入淡出的動畫將被同步處理，因此您的方法無法使其同時消失。

我建議您將這些圖像合並在同一個div並盡可能淡化它們：

演示

Answer 2

這是您的div定位的問題

我編輯了。 您需要做的就是正確疊放div，然后重新編輯絕對位置。 但是有效

編輯代碼

讓我更具體一點。

更改divs liek的順序，以便：

<div class="page1">
  <img src="http://i.imgur.com/BleOC.jpg">
</div>
<div class="page">
  <div class="bg"></div>
</div>

這將解決您的z-index問題。 我也對JS的每個div都進行了不同的調用，但這只是出於測試目的。 我想打個電話就好

我也在這里進行了位置編輯

但是似乎每個人都在修改它，所以在其他人把它弄亂之前快點

Answer 3

  function fadePages(num) {  
  $(".page").animate({
    opacity: num
    }, 1000*(num+1));

}

同時做同樣的事情。 有用。