無法居中淡入淡出

Question

我使用這個腳本淡出的圖像，並在新的圖像褪色的圖像（jQuery的）：

$(document).ready(function() { 
    $('#picOne').fadeIn(500).delay(2000).fadeOut(1500); 
    $('#picTwo').delay(3500).fadeIn(1000); 
}); 

我想圖像出現在頁面的頂部中心，但我不能讓圖像出現在同一個地方，除非我用這個CSS：

#picOne, #picTwo { 
    position: absolute; 
    display: none; 
} 

如果我使用的位置是：相對的#picOne，picTwo，那麼我可以居中圖像，但picTwo當它淡入時出現在picOne下面一秒鐘，這會使我的內容的其他部分下降，看起來很荒謬。使用position：絕對解決了這個問題，但是不可能讓它居中。

我認爲，在一個div包裝兩個圖像會有所幫助，但它似乎不有所作爲：

<div id="pics"> 
<%= image_tag 'egg.png', :id => 'picOne' %> <%= image_tag 'egg2.png', :id => 'picTwo' %>​ 
</div> 

#pics { 
     position:relative; 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
    } 

有什麼想法？謝謝你的幫助！

Answer 1

你可以試試：

$(document).ready(function() { 
    $('#picOne').fadeIn(500).delay(2000).fadeOut(1500, function() { 
     $('#picTwo').fadeIn(1000); 
    }); 
}); 

這將fadeIn()在#picTwo後#picOne淡出。所以，他們會保持在同一個空間。但是看起來在你的代碼中，兩個圖像同時出現，所以與空間發生碰撞。

要在中心對齊圖像，您可以使用CSS text-align:center。 See here.