Javascript 使用淡出/淡入效果HTML交换内容

我想知道是否有一种方法可以使用JS或jQuery将html页面的内容交换为一个很好的淡入淡出效果

在下面的HTML代码中，我无法将class=“internalwrapper”部分替换为一些新内容

如果你能帮我，那就太好了。：）

编辑： 对不起，这篇文章写得不好：P

这就是当我点击第四个div中的一个时，我想要交换的内容

    <a href="#">
<section class="one-fourth" id="html">
        <i class="fa fa-shopping-cart"><h3>Beställ</h3></i>

</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
    <i class="fa fa-list-ul"><h3>Recept</h3></i>

</section>
    </a>
</div>   
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper2">
    <article id="one-two">
        <h2>Recept</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi sit quas quam accusamus, quia facilis illo omnis repudiandae distinctio architecto sed, deleniti ducimus mollitia sequi repellendus. Distinctio rerum maiores rem.</p>
    </article>
    <aside id="tablet2">
       <hr>
        <img src="img/pannkakor.jpg" alt="">

    </aside>
</section>

接受
Lorem ipsum dolor sit amet，奉献精英。除了坐在被指控的人面前，所有人都有自己独特的建筑风格，他们都有自己的弱点。主要目的的区别

您可以为此使用淡出和淡出。fadeout/fadeIn还提供一个回调函数，该函数将在操作完成后触发

读这里

和

$（“.inner wrapper”）.fadeOut（3000，function（）{
$（this.html（“Hello”）；
$（“.inner wrapper”）.fadeIn（3000）
});
你厌倦了什么javascript？请提供你刚才说的“一些新内容”
    <a href="#">
<section class="one-fourth" id="html">
        <i class="fa fa-shopping-cart"><h3>Beställ</h3></i>

</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
    <i class="fa fa-list-ul"><h3>Recept</h3></i>

</section>
    </a>
</div>   
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper2">
    <article id="one-two">
        <h2>Recept</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi sit quas quam accusamus, quia facilis illo omnis repudiandae distinctio architecto sed, deleniti ducimus mollitia sequi repellendus. Distinctio rerum maiores rem.</p>
    </article>
    <aside id="tablet2">
       <hr>
        <img src="img/pannkakor.jpg" alt="">

    </aside>
</section>