jquery - 使用 Jquery 在 Div 之间淡入淡出

Question

我有以下 HTML 代码:

<section>

<div id="first">
---content
</div>

<div id="second">
---content
</div>

</section>

在页面加载时，第二个 div 及其内容是不可见的(我不知道是使用 .hide() 还是 CSS 更好)。我想使用 Jquery，在页面上进行一些交互后，使第一个 div 淡出并替换为第二个 div。

到目前为止，我自己使用了 fadein() 和 fadeout()，但是它使 div 在页面上跳来跳去。我试图无缝地淡出 div 1 的内容并替换为 div 2，占用与 div 1 相同的空间，并且不使页面格式跳转。

Answer 1

您可以轻松地使用切换类。 I don't recommend doing fadeIn and fadeOut.

CSS

    #first {
        background-color: red;
        height: 250px;
        opacity: 1;
        -webkit-transition: .25s all ease;
           -moz-transition: .25s all ease;
            -ms-transition: .25s all ease;
             -o-transition: .25s all ease;
                transition: .25s all ease;
    } 

    #second {
        background-color: green;
        height: 250px;
        opacity: 1;
        -webkit-transition: .25s all ease;
           -moz-transition: .25s all ease;
            -ms-transition: .25s all ease;
             -o-transition: .25s all ease;
                transition: .25s all ease;
    }

    .hidden {
        height: 0 !important;
        opacity: 0 !important;
    }

HTML

    <section id="parent">
        <div id="first">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sequi iure, nesciunt laudantium a beatae autem, commodi culpa, quasi vitae sint ad. Itaque repellat cum voluptate, est aut provident ipsum?
        </div>
        <div id="second" class="hidden">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sequi iure, nesciunt laudantium a beatae autem, commodi culpa, quasi vitae sint ad. Itaque repellat cum voluptate, est aut provident ipsum?
        </div>
    </section>

Javascript

jQuery(document).ready(function(){
    $('body').click(function(){
        $('#first, #second').toggleClass('hidden');
    });
});

fiddle 链接:https://jsfiddle.net/bngnxty9/

我添加了点击 body 事件，你可以在那里替换你自己的事件。