• Descrição:
  

Bom, recentemente foi lançado o pacotão com 50 tutoriais. Um deles(assim como diversos outros) me chamaram atenção. Atualmente, estou utilizando este código:

Código:

/**
 * Transição ao Entrar e Sair das Páginas
 * Versão: Todas
 * Autor: Kyo Panda
 * Site: ajuda.forumeiros.com
 */

var both, hidden, show, speed;

both = {
    'position': 'relative',
    'overflow-x': 'hidden'
};

hidden = {
    'opacity': '0',
    'left' : '0px'
};

show = {
    'opacity': '1',
    'left': '0px'
};

speed = 50;

$('<style>', {
    'type': 'text/css',
    'text': 'body { ' + $.map($.extend(both, hidden), function(value, key) {
        return key + ':' + value;
    }).join(';') + '}'
}).appendTo('head');

$(function() {
    $('body').animate(show, speed);
    $(window).on('beforeunload', function() {
        $('body').animate(hidden, speed);
    });
});

Fiz pequenas alterações nele, como quem usa pode perceber. Mas, eu queria acrescentar um efeito. Quando estamos prestes a visitar outra página, o fórum começa a sumir, deixando apenas o fundo, até que se carregue(normal do código, esse foi o objetivo dele).

Mas... queria acrescentar mais um detalhe. No caso, ao aparecer a página, queria que aparecesse tão lentamente quanto quando some. Ou seja, ter o mesmo efeito quando finaliza o carregamento também.

Isso é possível? Agradeço desde já!

• Informações:
  

Código:


/**
 * Transição ao Entrar e Sair das Páginas
 * Versão: Todas
 * Autor: Kyo Panda
 * Site: ajuda.forumeiros.com
 */

var both, hidden, show, speed;

both = {
    'position': 'relative',
    'overflow-x': 'hidden'
};

hidden = {
    'opacity': '0',
    'left' : '0px'
};

show = {
    'opacity': '1',
    'left': '0px'
};

speed = 1000;

$('<style>', {
    'type': 'text/css',
    'text': 'body { ' + $.map($.extend(both, hidden), function(value, key) {
        return key + ':' + value;
    }).join(';') + '}'
}).appendTo('head');

$(function() {
    $('body').animate(show, speed);
    $(window).on('beforeunload', function() {
        $('body').animate(hidden, speed);
    });
});