javascriptまたはjqueryを使用してWebページの表示内容をスムーズに移行するにはどうすればよいですか？

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のようなプラグインを使用することをおすすめしますか？

ありがとうございました！

重要EDIT：
に私はちらつきはほとんどスクロールバーが表示されるとすぐに消えて作るので、ページの幅を変更されたコンテンツの長さに起因して気づきました。

Answer 1

一度に表示できるセクションは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パラメータで遊ぶことができますので、予めご了承ください「遅い」、「速い」などの所望の効果を得るために：以下のコードを参照してください。あるいは、.fadeIn/.fadeOutのような別のjquery関数を使用して別の効果を得ることもできます。古いブラウザのサポートは、あなたのために問題がない場合

、私は完全にあなたの設定を変更し、代わりに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

問題は、それがURLハッシュタグ