web-dev-qa-db-ja.com

Jqueryは非表示と表示をアニメーション化します

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

これが私の サイト へのリンクです

サービスリンクをクリックすると、#slideshowdivを非表示にし、新しい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つのリンクです。クリックするとサービスが表示され、#slideshowdivが非表示になり、slideshow2divが非表示になります。次に、最初のものを交換します。

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

jqueryonclickhidejquery-animateshow
11
Cool Guy Yo

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

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メソッドが完了するたびに実行されます。したがって、ボックスを閉じたり開いたりして、コールバックメソッド内で直後にイベントを実行できます。

11
Sampson