无法居中淡入淡出图像（jQuery）答案

【问题标题】：Unable to center fadeIn fadeOut Images (jQuery)无法居中淡入淡出图像（jQuery）
【发布时间】：2012-08-09 03:14:00
【问题描述】：

我正在使用此脚本淡出图像并淡入新图像：

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

我希望图像出现在页面的顶部中心，但我无法让图像出现在同一个位置，除非我使用这个 CSS：

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

如果我对#picOne、picTwo 使用 position:relative，那么我可以将图像居中，但 picTwo 在 picOne 淡入时会出现一秒钟，这会降低我的其余内容，看起来很荒谬。使用 position:absolute 解决了这个问题，但是不可能让它居中。

我认为将两个图像包装在一个 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;
    }

有什么想法吗？感谢您的帮助！

【问题讨论】：

标签： jquery html css positioning centering

【解决方案1】：

你可以试试：

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

fadeIn() 和 #picTwo 在 #picOne 之后会淡出。因此，它们将保留在同一个空间中。但是在您的代码中，这两个图像似乎同时出现，因此与空间发生冲突。

要将图像居中对齐，您可以使用 CSS text-align:center。 See here.

【讨论】：