jQuery fadeOut() fadeIn() с функцией html()

Question

Мне нужен эффект затухания во время перехода по моему тексту. но я не знаю как? мне нужно было поместить fadeIn() внутри методов html? развеселить

и я должен добавить больше текста, потому что сайт спрашивают меня за это

$(document).ready(function(){ 
 
    $("#b1").click(function(){ 
 
     $("#container") 
 
    $("#container").html($("#page1").html()); 
 
    }); 
 
     $("#b2").click(function(){ 
 
    $("#container").html($("#page2").html()); 
 
    }); 
 
     $("#b3").click(function(){ 
 
    $("#container").html($("#page3").html()); 
 
    }); 
 
});

li { 
 
    display: inline 
 
} 
 

 
#page2 { 
 
    display: none; 
 
} 
 

 
#page3 { 
 
    display: none; 
 
} 
 

 

 

 
#page1 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>NAV BAR</p> 
 
     <nav> 
 
      <ul> 
 
       <li><button id="b1">PAGE1</button></li> 
 
       <li><button id="b2">PAGE2</button></li> 
 
       <li><button id="b3">PAGE3</button></li> 
 
      </ul> 
 
     </nav> 
 
     <div id="container"></div> 
 
      <div id="page1"> 
 
       <p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p><p>JE SUIS LA PAGE 1</p> 
 
      </div> 
 
      <div id="page2"> 
 
       <p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p><p>IAM THE PAGE 2</p> 
 
      </div> 
 
      <div id="page3"> 
 
       <p>00010111011010</p><p>00010111011010</p><p>00010111011010</p><p>00010111011010</p><p>00010111011010</p><p>00010111011010</p> 
 
      </div>

Answer 1

После того, как элемент виден вам будет нужно, чтобы скрыть его, или исчезать его первым.

Все анимации jQuery имеют полные обратные вызовы, поэтому вы можете сделать что-то вроде.

$("#container").fadeOut(function(){ 
    /* container is now hidden so change the html and fade it back in */ 
    $(this).html($("#page1").html()).fadeIn(); 
}); 

Для более быстрой шкурой вы можете цепи все:

$("#container").hide().html($("#page1").html()).fadeIn(); 

Answer 2

Yo не нужно вставить содержимое с JQuery ...

Я предлагаю вам, чтобы оставить содержимое внутри контейнер и сделайте #pages {display: none; } с помощью css.

Затем на событие щелчка вызвать две функции:

Первое: скрыть все #pages.

Во-вторых: используйте функцию fadeToggle() из jquery для отображения вашего элемента.

Answer 3

Это даст вам/Out эффект FadeIn ...

$(document).ready(function(){ 
    $("#b1").click(function(){ 
     $("#container").fadeOut(function() { 
      $(this).html($("#page1").html()).fadeIn(); 
     }); 
    }); 
    // and so on... 
});