Question

我有2个div：

<div id="#content1">
    <div id="divWelcome" style="margin-top:50px;">
        <div id="headerimg" style="position: relative;">
            <div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
                We offer Cloud solutions for small businesses to help them manage their workflow requirements
            </div>

            <hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>


            <div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
               Our core sectors of expertise are professional services, data management and outsourcing.
            </div>

        </div>


        <div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
            &nbsp;
        </div>
     </div>
</div>

所以当页面加载第一个div节目时。我想要的效果是当用户按下一个按钮时divFirst轻轻消失，divSecond轻轻地消失。我已经使用了这一点jQuery，但效果看起来并不是很令人满意。

<script type="text/javascript">
    $(document).ready(function () {
        $("#divAbout").click(function () {
            $("#headerimg").fadeOut();
            $("#divAboutContents").fadeIn();
        });
    });
</script>

我还可以尝试/阅读什么？感谢

NB 这是我的CSS的一部分

#content1 {
    clear: both;
    position: absolute;
}

另外，我正在褪色另一个。只是忘了把它放在问题中。我得到的影响是笨拙的＆＃39;

Answer 1

你必须将2个div包裹在位：相对div并将它们设置为绝对定位。这样div就会一个接一个，你不必淡出底部div，只需淡入/淡出顶部div就会产生淡入淡出效果。

如何淡化/混合2个div

1 个答案: