Question

我想知道是否有办法使用JS或jQuery交换html页面的内容以及淡出淡出效果。

在我下面的HTML代码中，我无法换出section class =＆＃34; inner-wrapper＆＃34;对于一些新内容。

如果你可以帮助我，那会很棒。：）

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

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

1 个答案: