Transition between html change

Question

I have these two functions, one removes everything from the page and one adds it back. When everything is removed a black-ish screen is shown with a loading logo in the middle.

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

And the CSS class 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;
}

Now, how would I be able to have a smooth transition between the two?

Right now it just goes straight to a black screen and doesn't seem right. I have no idea how to do this.

either JS/jQuery or CSS solutions are fine :). CSS preferred though. Thanks :)

I know doing this removes all binds etc but I have taken that into account and hideLoading is like never used so yeah :)

Answer 1

Instead of doing .html('') and .html(string), just detach the elements.

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

I also added in how to do the transition with a .fadeOut(200)

Answer 2

Don't set the body to have the overlay class.

Instead, create a div that goes over the body, which always has that class. The class should have "display: none;"

When you want to kill your page, you can do this using jQuery:

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

Then you can replace the content underneath, you probably want to do that, after the overlay has shown, then hide the overlay, like so:

$('#overlay').show(500, function() {
    // replace the page contents here
}).hide(500);

Answer 3

Make use of CSS3 Transitions:

body {
    -webkit-transition: 0.5s background ease;
    -moz-transition: 0.5s background ease;
    -o-transition: 0.5s background ease;
    transition: 0.5s background ease;
}