如何用javascript或jquery平滑過渡網頁的可見內容？

Question

我有一個不同部分的網頁，我想在點擊部分鏈接時更改可見部分。

<div id="sections" class="col-md-8"> 
     <section id="pathogens" > 
      <p>aaaaa</p> 
     </section> 
     <section id="population" > 
      <p>bbbbb</p> 
     </section> 
    </div> 

作爲我未完成的實驗，我用這個小代碼實現了這一點。

function activateSection(section){ 
    $('#sections').children().hide(); 
    $('#'+section).show(); 

    $('#menu li').removeClass('active'); 
    $('#menu li a.'+section+'').parent().addClass('active'); 
} 

但事實並非真正順暢，頁面閃爍，這不是賞心悅目。

我搜索了推薦的方法來做到這一點，但我沒有找到任何具體的問題。

您是否建議使用像smoothState.js這樣的插件？

謝謝！

重要編輯：
我注意到閃爍主要是由於其正在出現並迅速消失滾動條內容的長度，從而改變頁面的寬度。

Answer 1

一次只能有一個可見部分，並跟蹤哪個部分可見，並且有一個變量超出函數的範圍。請參見下面的代碼：

var currentActiveSection = "pathogens"; 
    function activateSection(section) { 
     $('#' + currentActiveSection).hide("slow"); 
     $('#' + section).show("slow"); 
     currentActiveSection = section; 
     // only updated the relevant code above, also make any changes required to the code below 
     $('#menu li').removeClass('active'); 
     $('#menu li a.' + section + '').parent().addClass('active'); 
    } 

請注意，你可以玩的.show和.hide參數「慢」，「快」等，以獲得預期的效果。或者使用另一個jQuery的功能，如.fadeIn/.fadeOut獲得不同的效果。

如果舊的瀏覽器的支持是不是你的問題，我建議徹底改變你的設置，並與CSS3過渡，而不是去： http://tympanus.net/Tutorials/CSS3PageTransitions/index.html#portfolio

希望幫助！

Answer 2

function activateSection(section){ 
 
    $('#sections').children().hide(); // or fadeOut() or sideUp() 
 
    $('#'+section).fadeIn(2000); //or slideDown() 
 

 
    $('#menu li').removeClass('active'); 
 
    $('#menu li a.'+section+'').parent().addClass('active'); 
 
} 
 

 
activateSection('pathogens') // or 'population'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sections" class="col-md-8"> 
 
     <section id="pathogens" > 
 
      <p>aaaaa</p> 
 
     </section> 
 
     <section id="population" > 
 
      <p>bbbbb</p> 
 
     </section> 
 
    </div>

Answer 3

老實說，我認爲你在找什麼比你想象的更容易。爲什麼不改用show（）函數，而是調用fadeIn（'slow'）？

根據內容的實際外觀，也可以調用slideDown（）和slideUp（）函數。

Answer 4

引導3有一個很好的過渡特點：http://getbootstrap.com/javascript/#tabs

的問題是，它停用網址井號標籤