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，那么我可以将图像居中，但是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()淡出后，#picTwo将会#picOne。所以，他们将留在同一个空间。但是在您的代码中，两个图像似乎同时出现，因此会与空间发生冲突。

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

无法居中fadeIn fadeOut Images（jQuery）

1 个答案: