1

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

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

我希望图像出现在页面的顶部中心，但我不能让图像出现在同一个地方，除非我使用这个 CSS：

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

如果我将 position:relative 用于#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;
    }

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

4

1 回答 1

1

你可以试试：

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

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

要在中心对齐图像，您可以使用 CSS text-align:center。看这里。

于 2012-08-12T19:12:17.017 回答