javascript - 如何以较少的 'clunky' 方式在 2 个 div 之间淡入淡出/混合

Question

注意

我的标题:

<header>
    <div style="float:left;margin-left:20px;">
       <div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;">&nbsp;</div>
        <div style="clear:both;float:left;"></div>
        <div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
    </div>
    </div>
</header>

我有 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>

我还能尝试/阅读什么？谢谢

注意这是我的 CSS 的一部分

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

我也在淡出另一个。只是忘了把它放在问题中。我得到的影响是“笨拙的”

Answer 1

“愉悦”是一个非常主观的术语，但是要改进它，您可以将两个 div 元素放置在绝对定位的父容器中，以便它们重叠。然后，您可以根据需要在两者之间 fadeToggle()。像这样:

$('#container').click(function() {
  $(this).find('div').fadeToggle();
})

#container > div {
  position: absolute;
}
#divSecond {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
  <div id="divFirst">some content with images</div>
  <div id="divSecond">different content with images</div>
</div>

单击文本以查看正在运行的淡入淡出过渡。