11

リンクをクリックすると、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があるので、リンクから私のソースを表示する方が簡単かもしれません。

4

1 に答える 1

11

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

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

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

于 2009-06-22T00:05:30.533 に答える