Выход / Всплывающая страница внешней ссылки / загрузка страницы

Question

Я видел на сайтах раньше, когда вы нажимаете на ссылку, происходит постепенное исчезновение на странице загрузки / заставки, а затем появляется новая страница. К сожалению, я не могу вспомнить, где я видел это, иначе я быпросто расскажите их.

Кто-нибудь знает, что для этого нужно создать скрипт jquery, mootools, ajax?

Спасибо!

Answer 1

Что-то более сложное сделано с MooTools: http://www.jsfiddle.net/oskar/rDrtP/

var contentEl = $('content'),
    loaderEl = $('loader'),
    navEls = $$('#nav a');

var loadContent = function(){

    // fade out the container
    contentEl.fade('out');

    // show the loader
    loaderEl.set('opacity', 0).fade('in');

    // fetch the new content
    new Request.HTML({
        url: this.get('href'),
        onComplete: function(responseEls){

            // empty the previous content and inject the new one
            contentEl.empty().adopt(responseEls);

            // show the content
            contentEl.fade('in');

            // hide the loader
            loaderEl.fade('out');
        }
    }).post({
        html: '<strong>' + this.get('html') + '</strong>'
    });
};

navEls.each(function(nav){
    nav.addEvents({
        click: function(e){
            e.stop();

            // load new content when clicking the links
            loadContent.bind(this).run();
        }
    });
});​

Answer 2

Этот скрипт исчезнет с вашего контейнера страниц и исчезнет на странице загрузки (заставке).Как только заставка загружена, он делает AJAX-запрос на контент.По завершении он исчезает с заставки на новую страницу.

$('#wrapperForThePage').click(function() {
    $('#wrapperForThePage').fadeOut(function() {
        $('#loadingSplash').fadeIn();
        $('#wrapperForThePage').load("yourpage.html", function() {
            $('#loadingSplash').fadeOut(function() {
                $('#wrapperForThePage').fadeIn(); // Called on complete, 404 or success
            });
        });
    });
});​

Fiddle http://jsfiddle.net/4KRpE/