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;
}

现在，我如何才能在两者之间平稳过渡？

现在它只是直接进入黑屏并且看起来不正确。我不知道该怎么做。

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

不要将主体设置为具有覆盖类。

相反，创建一个覆盖主体的 div，它始终具有该类。该类应具有“显示：无；”

当你想杀死你的页面时，你可以使用 jQuery 来做到这一点：

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

然后你可以替换下面的内容，你可能想要这样做，在覆盖显示之后，然后隐藏覆盖，如下所示：

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