1

これまでのところ、クラスを 1 つの div に適用できますが、別のクラスを別の div に追加して、その表示とフェードインを行いたいと考えています。

http://www.penguinie.co.uk/test/

最初のページがフェードアウトし、概要ページ (またはプロジェクトまたは連絡先ページ) がフェードインするようにします。

<li><a href="#about" onclick="$('#start').addClass('fadeOutUp'); $('#about').addClass('animated fadeInDown')">About</a></li>

それが、メインページをフェードアウトさせるために使用したものです。クラス hidden は、ユーザーが about リンクをクリックするまで about ページを非表示にするために使用されます。

.hidden {
    display: none;
}

.show {
    display: inline;
}
4

2 に答える 2

2

これは、jQuery の組み込みメソッドであるfadeInおよびfadeOutを使用して行うことができます。

$('#start').fadeOut(500, function(){
    $('#about').fadeIn(500);
})

このように、#start がフェードアウトした直後に #about がフェードインします。別のアニメーションが必要な場合は、animateメソッドを使用してアニメーションを指定できます。

setTimeout メソッドを使用することもできますが、私が見る限り、1 つの div を非表示にし、もう 1 つの div をその直後に表示する必要があります。この場合、2 つのアニメーションを連鎖させる方が適切だと思います。

また、@pszaba は正しいです。onclick 属性は使用しないでください。次のようなクリックハンドラーのようなイベント ハンドラーを使用する必要があります。

$("#about").click(function(){
    $('#start').fadeOut(500, function(){
        $('#about').fadeIn(500);
    });
});

(#about 要素は非表示でクリックできないため、このコードは実際には意味がありません :) 独自の実装の参照として使用してください。)

于 2013-11-04T16:57:10.403 に答える