Как вы заставляете html-страницу исчезать, а другая исчезает?

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

Ответ 1

Определенно получить фреймворк javascript. jQuery популярен (потому что это туз), но там Mootools, Prototype и Dojo, чтобы назвать несколько.

Я не уверен, что кроссфейдинг можно сделать надежно во всех браузерах без всплывающих/прыгающих артефактов. Даже пример Dancrumb указывает на немного веревку (никакого оскорбления не было Дан).

По сути, у вас может быть 3 слоя (сверху вниз)

экран (изначально невидимый)
страница (одна)
контейнер (изначально пуст)

когда пользователь пытается перейти на вторую страницу, загрузите его в контейнер с помощью ajax. Как только страница загрузится, начните исчезать экран. Как только экран будет на 100% непрозрачности, манипулируйте DOM, чтобы переместить загруженный контент из скрытого контейнера и в то, что теперь является второй страницей, затем снова затухает экран.

РЕДАКТИРОВАТЬ в боковом объявлении - я бы вызвал все мои webdev mojo и попытался убедить клиента в том, что я плохо знаю, что у него есть полное замирание страниц на сайте, предназначенном для передачи информации. Очевидно, я знаю сладкий FA об этом проекте, поэтому не стесняйтесь меня ударить; но я никогда не видел случая, когда причудливые эффекты и переходы улучшали удобство использования сайта при использовании на уровне страницы. Я знаю, что это меня раздражало бы, если бы мне пришлось ждать, когда придуманный переход закончится, прежде чем я смогу продолжить навигацию...

Ответ 2

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

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

Ответ 3

Это должно работать, не полагаясь на 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 done (on the 'callback') send the browser to the link.
            */
            window.location.href = link;
        });
        return false;
    });

});

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Спасибо, Джо

Ответ 6

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

Ответ 7

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

CSS

 body { display:none; }

$(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 запускать эффект затухания при загрузке страницы. Тело fadeIn устанавливается с интервалами, чтобы обеспечить более плавный эффект fadeIn, дающий время загрузки сайта. Я установил эффект fadeOut для запуска при нажатии любой привязки (вы можете изменить его, как вы хотите действовать как триггер исчезновения). Когда страница исчезнет, она будет наиболее ярко исчезать на "белом" экране. Чтобы этого избежать, установите цвет фона HTML для любого HEX, чтобы он соответствовал цвету сайтов.

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

Ответ 8

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

Ответ 9

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

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

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

Я просто повторяю из первого предложения: hacky.