jquery - 无法居中淡入淡出图像 (jQuery)

Question

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

$(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;
    }

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

Answer 1

你可以试试:

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

fadeIn() #picOne 之后的 #picTwo 会淡出。所以，他们将留在同一个空间。但是在您的代码中，两个图像似乎同时出现，因此与空间发生了碰撞。

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