Как Вы заставляете страницу HTML постепенно исчезнуть, в то время как другой постепенно появляется?

попробуйте этот плагин jQuery. это учебник по переходам между страницами

Что происходит со страницами, содержащими элементы Flash / видео или другой сложный материал? Они исчезнут должным образом?

Вот хакерский способ, о котором я только что подумал. Подобно ответу Алекса Лоуфорда, но, надеюсь, немного лучше:

Щелкнув ссылку, отправьте запрос AJAX для новой страницы, но ничего не делайте с ответом . Как только вы получите ответ, затем закройте текущую страницу, введите стандартную команду window.location = и пусть javascript на этой стороне немедленно скроет, а затем исчезнет в новом документе.

Здесь есть надежда, что ответ от вызова AJAX кэшируется, поэтому время между постепенным исчезновением и появлением будет незначительным.

Я просто повторю из первого предложения: это хакерский .

Переходы между страницами изначально поддерживаются IE, с использованием тега META . Подробнее см. страницу Microsoft о фильтрах и переходах

Для независимого от браузера подхода (с использованием Javascript) см. this Вопрос о переполнении стека

Это должно работать, не полагаясь на Ajax (jQuery):

$(function(){

    /*
    Add this code to every page.

    We start by hiding the body, and then fading it in.
    */
    $('body').hide().fadeIn('fast');

    /*
    Now we deal with all 'a' tags...
    */
    $('a').click(function(){
        /*
        Get the url from this anchors href
        */
        var link = $(this).attr('href');
        /*
        Fade out the whole page
        */
        $('body').fadeOut('fast', function(){
            /*
            When that's done (on the 'callback') send the browser to the link.
            */
            window.location.href = link;
        });
        return false;
    });

});

Однако стоит отметить, что если вы загружаете js внизу страницы (как нам часто говорят), при медленной загрузке страницы страница может быть видимой, затем невидимой, а затем снова исчезать ... Что выглядело бы очень странно.

Решением было бы просто скрыть тело в CSS, но, возможно, у вас могут быть посетители с выключенным JS, но включенным CSS, тогда у них будет просто пустая страница. В качестве альтернативы вы можете использовать небольшое количество js в верхней части страницы (не полагаясь на jQuery), чтобы скрыть тело.

И наконец, почему? Думаю, если бы я посетил ваш сайт, эти эффекты довольно быстро начали бы меня серьезно раздражать. Почему бы просто не перенаправить пользователя на запрашиваемую страницу?

Можно ли загрузить контент с помощью запроса AJAX, а затем использовать javascript для постепенного исчезновения одной страницы и постепенного появления другой? В jQuery что-то вроде:

$.get('newpage.html', {}, function(res){
    $('#content-container').fadeOut().html(res).fadeIn();
});

Не идеально, но, надеюсь, это шаг в правильном направлении? HTML был создан не для этого ...

Спасибо, Джо

Не будет работают в IE, но у WebKit и FireFox есть переходы CSS, и они работают намного плавнее, чем любой JavaScript.

http://www.w3.org/TR/css3-transitions/

Это может быть немного поздно, но для постепенного появления страницы при ее загрузке, а затем для постепенного исчезновения при щелчке я бы предложил использовать jQuery. Я написал этот небольшой сценарий, который поможет вам. Взгляните на это, и я объясню ниже.

CSS

 body { display:none; } 

JS

$(document).ready(function() 
{
        $( 'body' ).fadeIn("slow", 0.0);
        $( 'body' ).fadeIn("slow", 0.1);
        $( 'body' ).fadeIn("slow", 0.2);
        $( 'body' ).fadeIn("slow", 0.3);
        $( 'body' ).fadeIn("slow", 0.4);
        $( 'body' ).fadeIn("slow", 0.5);
        $( 'body' ).fadeIn("slow", 0.6);
        $( 'body' ).fadeIn("slow", 0.7);
        $( 'body' ).fadeIn("slow", 0.8);
        $( 'body' ).fadeIn("slow", 0.9);
        $( 'body' ).fadeIn("slow", 1.0);
                $('a').click(function(){
                $('body').fadeOut();
                 setTimeout("nav('"+this.href+"')",1000);
               return false;
       });
    });
function nav(href){
location.href=href;
};

CSS сдерживает отображение тела, что позволяет JS запускать эффект затухания при загрузке страницы. Body fadeIn устанавливается с интервалами, чтобы обеспечить более плавный эффект fadeIn, давая сайту время для загрузки. Я установил эффект fadeOut для срабатывания при щелчке по любой ссылке привязки (вы можете изменить его так, как хотите, чтобы он работал как триггер постепенного исчезновения). Когда страница тускнеет, она, скорее всего, превратится в «белый» экран. Чтобы избежать этого, установите цвет фона HTML на любой HEX, чтобы он соответствовал цвету сайта.

Этот сценарий, вероятно, является лучшим решением, и его можно быстрее всего внедрить на любом сайте. Он был протестирован в IE7-8, FF 3+ ​​и Opera 9-10 и работает отлично. Наслаждаться!