1

これらの 2 つの機能があります。1 つはページからすべてを削除し、もう 1 つはページを追加します。すべてが削除されると、黒い画面が表示され、中央に読み込み中のロゴが表示されます。

Base.showLoading = function () {
    var r = false;
    if (!$('body').hasClass('overlay')) {
        Obj.tempHtml = $('body').html();
        $('body').html('');
        $('body').addClass('overlay');
        r = true;
    }
    return r;
};

Base.hideLoading = function () {
    var r = false;
    if ($('body').hasClass('overlay')) {
        $('body').html(Obj.tempHtml);
        delete Obj.tempHtml;
        $('body').removeClass('overlay');
        r = true;
    }
    return r;
};

そしてCSSクラスoverlay：

.overlay
{
    background-color: #111;
    background-position: center;
    background-image: url('../img/loading_black.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

では、どうすれば 2 つの間をスムーズに移行できるでしょうか?

現在、真っ直ぐに黒い画面が表示され、正しくないようです。これを行う方法がわかりません。

JS/jQuery または CSS ソリューションのいずれかで問題ありません:)。ただし、CSS が推奨されます。ありがとう ：）

これを行うとすべてのバインドなどが削除されることはわかっていますが、それを考慮しており、hideLoading使用されたことがないようなものです:)

4

3 に答える 3

1

.html('') と .html(string) を実行する代わりに、要素を切り離すだけです。

Base.showLoading = function () {
    var r = false;
    if (!$('body').hasClass('overlay')) {
        Obj.bodyElements = $('body').children().fadeOut(200);
        Obj.bodyElements.promise().done(function(){
            Obj.bodyElements.detach();
            $('body').addClass('overlay');
        });        
        r = true;
    }
    return r;
};

Base.hideLoading = function () {
    var r = false;
    if ($('body').hasClass('overlay')) {
        $(Obj.bodyElements.get()).appendTo('body');
        $('body').removeClass('overlay');
        $('body').children().fadeIn(200);
        r = true; 
    }
    return r;
};

また、トランジションを行う方法を追加しました.fadeOut(200)

于 2013-04-04T20:40:39.140 に答える
1

CSS3 トランジションを利用します。

body {
    -webkit-transition: 0.5s background ease;
    -moz-transition: 0.5s background ease;
    -o-transition: 0.5s background ease;
    transition: 0.5s background ease;
}
于 2013-04-04T20:40:44.693 に答える
0

ボディにオーバーレイ クラスを設定しないでください。

代わりに、常にそのクラスを持つ body を超える div を作成します。クラスには「display: none;」が必要です。

ページを強制終了したい場合は、jQuery を使用してこれを行うことができます。

$('#overlay').show(500);

次に、下のコンテンツを置き換えることができます。おそらく、オーバーレイが表示された後にそれを行い、次のようにオーバーレイを非表示にします。

$('#overlay').show(500, function() {
    // replace the page contents here
}).hide(500);
于 2013-04-04T20:41:58.560 に答える