1

我正在使用 jQuery 动画淡入图像，为此，这两个图像位于 DIV 内部的 DIV 中，以使其看起来像一个淡入另一个，一个位于另一个之上。它有效，我想做的就是将它移到页面的中心，但似乎无法让它工作。这是HTML和CSS。我尝试修改边距、顶部和左侧定位等，但没有任何成功。感谢您的任何反馈。

编辑：我想要的是一个直接在另一个 DIV 之上的 DIV。它们都充满了相同的图像，除了一个周围有我在编辑软件中创建的发光。当页面加载时，jQuery 触发第一个 div .fade 淡出，并允许其他 div .inside 淡入，创建一个动画，使它看起来好像一个图像正在慢慢地变成另一个图像。这已经自动发生并且完美运行。我只是希望图像直接居中在浏览器窗口的中间，而不是自动放置在左侧。

CSS

    .container
    {
        position:relative;
    }
    .fade
    {
        position: absolute;
        z-index:1;
        top:0;
        left:0;
    }
    .inside
    {
        position: absolute;
        display: none;
        z-index:2;
        top:0;
        left:0;
    }

HTML

    <div class="container">
            <div class="fade">
                <img src="namelarge.png" />
                    <div class="inside">
                        <img src="nameglow.png" />
                    </div>
            </div>
        </div>

编辑：这是我的 jQuery

$(window).load(function () {
setTimeout(function () {
    $('div.fade > div') . fadeIn(3000) // 3 second fade in
}, 2000) // after 2 seconds. })
4

2 回答 2

0

我假设您正在尝试将 .fade div 置于 .container div 的中心。

从 .fade css 中取出 top 和 left 属性，定义 width 属性，并添加：

margin: 0 auto;

这应该水平居中。

于 2013-05-18T05:01:34.903 回答
0

如果您想使.fadediv 居中，请尝试：

.fade {
position:relative;
width:50px;
z-index:1;
margin:auto;
}
.inside {
position: absolute;
display: none;
z-index:2;
top:0;
left:0;
}

在这里查看：jsfiddle.net/TcfBH/ (v2)

于 2013-05-18T05:08:17.000 回答