1

sを使った簡単なメニューがあります<ul>。Everyは、クリックすると<ul>そのコンテンツを にロードします。<div>

ここに私のコードがあります: http://jsfiddle.net/EPvGf/16

したがって、私の問題を理解できるようにするために、最初にページを開いたときに、<ul>(デフォルトの「説明」ではなく) 任意の項目をクリックしてみてください。ロード (フェードイン) する必要があるコンテンツがその前のコンテンツの下に入り、古いコンテンツのフェードアウトが完了すると、フェードインする新しいコンテンツが上に移動して古いコンテンツの代わりになることがわかります。

私が望むのは、古いコンテンツがページから完全に消えると、新しいコンテンツがその場所に表示され、互いの下に表示されず、1 つが 2 番目の場所になることです。

4

3 に答える 3

4

.pbox:visible fadeOut の完了時に関数を実行することで、新しい div をフェードインできます (または必要な他のコードを実行できます)。

$('.pbox:visible').fadeOut('slow', function() {
    $('.pbox[id=' + $('.current a').attr('data-id') + ']').fadeIn('slow');
});

http://jsfiddle.net/EPvGf/20/

于 2013-06-12T21:27:13.350 に答える
2

これは、フェードアウト メソッドで完全なコールバックを利用する必要がある場所です。

$('.pbox:visible').fadeOut('slow', function(){
    $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow'); //After everything has been faded out fade in the corresponding div.
});

デモ

さらに、これをドキュメントの準備ができているときに追加することもできます

 $('.pbox:gt(0)').hide();  // hide everything but the first one first up.

そして取り除く

.find('a:first').click();

デモ

于 2013-06-12T21:18:18.653 に答える
2

1 つの解決策:

遅延を使用して、フェードアウトが終了するまで待ちます。数字で遊ぶ必要があるかもしれません

$('.pbox[id=' + $(this).attr('data-id') + ']').delay(800).fadeIn('slow');
于 2013-06-12T21:18:59.923 に答える