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

Question

我想知道是否有一种方法可以使用JS或jQuery交换具有漂亮的淡入淡出效果的html页面内容。

在下面的HTML代码中，我无法将class =“ 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还提供了一个回调函数，一旦操作完成，该函数将被触发。

在这里阅读

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>