フェードアウト/フェードイン効果を使用したコンテンツのスワップHTML

Question

JSまたはjQueryを使用してフェードアウト効果が素晴らしいhtmlページのコンテンツをスワップする方法があるのだろうかと思っていました。

以下のHTMLコードでは、いくつかの新しいコンテンツのセクションクラス= "inner-wrapper"をスワップアウトすることはできません。

あなたが私を助けることができれば素晴らしいでしょう。 :)

<div class="meny"> 
<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-wrapper"> 
    <article id="one-two"> 
    <h2>Målet med vagnen</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p> 
    </article> 
    <aside id="tablet2"> 
    <hr> 
     <h2>Senaste nytt från vagnen</h2> 
     <a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
    </aside> 
</section> 

編集：悪いポストのための 申し訳ありません：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> 

Answer 1

これにはfadeOutとfadeinを使用できます。 fadeout/fadeInは、アクションが完了すると起動されるコールバック関数も提供します。

はJavascriptをあなたが疲れてい何ここ

http://api.jquery.com/fadein/ とhttp://api.jquery.com/fadeout/

$(".inner-wrapper").fadeOut(3000, function() { 
 
    $(this).html("<div>Hello</div>"); 
 
    $(".inner-wrapper").fadeIn(3000) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="meny"> 
 
<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-wrapper"> 
 
    <article id="one-two"> 
 
    <h2>Målet med vagnen</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p> 
 
    </article> 
 
    <aside id="tablet2"> 
 
    <hr> 
 
     <h2>Senaste nytt från vagnen</h2> 
 
     <a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
    </aside> 
 
</section>