无法居中淡入淡出

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.