0

「login」という名前のセクションと「register」という名前のセクションがあります。それらの不透明度が変化すると、0.3 秒かかる線形遷移が必要になります。

CSS:

#login{
opacity: 0;
transition:opacity 0.3s linear;}

#register{
opacity: 0;
display: none;
transition:opacity 0.3s linear;}

ここのホームページにアクセスして「クエリ」をクリックすると、不透明度が 1 に#login変わります。トランジションで問題なく動作します。Login-Form の下にある「oder regisriere dich neu」をクリックすると、Login-Section がopacity: 0再び取得され、次に get が取得されますdisplay: none。それはトランジションでも完璧に機能します。

しかし、REGISTER-Section が配置されdisplay: blockてからopacity: 1( setTimeout500 ミリ秒後)、これには遷移がありません! なぜ？「Hast du schon einen Account?」をクリックすると、再び (ログインに戻るため)、レジスタ ブロックは完全に移行してフェードアウトし、ログイン フォームは再び移行なしで表示されますか?

不透明度を設定するための Javascript コードは次のとおりです。

function changeSection(IDOut, IDIn)
{
    var IDOut = "#" + IDOut;
    var IDIn = "#" + IDIn;

    hideSection(IDOut);
    showSection(IDIn);
}

function hideSection(IDOut)
{
    $(IDOut).css({opacity: "0"});
    setTimeout(function(){
        $(IDOut).css({display: "none"});
    },500);
}

function showSection(IDIn)
{
    setTimeout(function(){
        $(IDIn).css({display: "block"});
        $(IDIn).css({opacity: "1"});
    },500);

}

IDOut はセクションです。フェードアウトしたいです (魔女はログインと登録に最適です)。

IDIn はセクションです。フェードインしたいです (ログインと登録には WOKR を使用しないでください)。

IDIn でトランジションが機能しないのはなぜですか? 何か案は？

4

2 に答える 2

2

あなたはjQueryを使用しています。これをもっと簡単に行うことができ、jQueryに処理させることができます。

showSection と hideSection のコードの代わりに、次を使用します。

$('#yourselector').fadeIn(300);

300 ミリ秒の時間で要素をフェードインするには、次のようにします。

$('#yourselector').fadeOut(300);

それを非表示にします。

于 2013-10-17T09:36:06.773 に答える