JQueryアニメーションの非表示と表示

Question

リンクをクリックすると、2つのことが同時に起こります。私はゆっくりとJqueryのドキュメントを調べていますが、まだ必要なことをまだ学んでいません。

こちらは私のサイト

へのリンクです。

サービスリンクをクリックすると、 #slideshow div が非表示になり、新しいdivがそれを置き換えます。

サービスリンクをクリックするとスライドショーがアニメーション化されるようにしましたが、アニメーション機能を実行するか、リンクされたhtmlページに移動するか、両方ではありませんでした。どうすれば両方を達成できますか。

同じページでdivを非表示にして表示するだけでも、新しいhtmlページに移動しても問題はありません。アニメート機能を持ち、コンテンツを非表示にしながら変更したいだけです。

これは私が使用しているjqueryコードです

$(document).ready(function(){   
  $("a.home").toggle(
    function(){
      $("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow');   
    },
    function(){
      $("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow');   
    }
  );
});

$(document).ready(function(){   
  $("a.services").toggle(
    function(){
      $("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow');
    },
    function(){
      $("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow');
    }
  );
});

ホームとサービスは2つのリンクです。クリックするとサービスが #slideshow div を非表示にし、 slideshow2 を表示します div 、これは非表示になり、最初のものを置き換えます。

かなりの量のhtmlがあるため、リンクからソースを簡単に表示できます。

Answer 1

更新：このソリューションは、コメントのフォローアップの質問に従って更新されました。

show / hideメソッドのコールバックメソッドを使用する必要があります。

>

$("a").click(function(){

  /* Hide First Div */
  $("#div1").hide("slow", function(){
    /* Replace First Div */
    $(this).replaceWith("<div>New Div!</div>");
  });

  /* Hide Second Div */
  $("#div2").hide("slow", function(){
    /* Replace Second Div */
    $(this).replaceWith("<div>New Div!</div>");
  });

  /* If you wanted to sequence these events, and only
     hide/replace the second once the first has finished,
     you would take the second hide/replace code-block 
     and run it within the callback method of the first
     hide/replace codeblock. */

});

コールバックメソッドは、.show / .hide関数の2番目のパラメーターです。 .show / .hideメソッドが完了するたびに実行されます。したがって、ボックスを閉じる/開くことができ、コールバックメソッド内ですぐにイベントを実行します。