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

Question

リンクをクリックすると2つのことが同時に起こります。私はゆっくりとJqueryのドキュメントを読んでいますが、私がまだ必要としていることをまだ学んでいません。私は非表示に#slideshow divの、およびそれに代わる新しいDIVをご希望のサービスのリンクをクリックするとここで

は私のsite

へのリンクです。

サービスリンクをクリックするとスライドショーがアニメーション表示されるようにしようとしましたが、アニメーション機能を実行するか、リンクされたhtmlページに移動します。どのように私は両方を達成するだろう。

同じページにdivを表示したり、新しいHTMLページに移動しても問題はありません。私はちょうどアニメーション機能を持って、1つを隠しながら内容を変更したい。

これは私が

$(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要素を、表示されるでしょうを使用していますjqueryのコードです最初のものを隠して置き換えてください。

かなりの量のhtmlがあるので、リンクから自分のソースを見る方が簡単かもしれません。

Answer 1

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

show/hideメソッドのcallback methodを使用する必要があります。

$("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メソッドが完了するたびに実行されます。したがって、あなたのボックスを閉じる/開くことができ、コールバックメソッド内ですぐにイベントを実行します。