плавный переход между страницами при перенаправлении с помощью jquery - PullRequest
Новая
       28

плавный переход между страницами при перенаправлении с помощью jquery

0 голосов
/ 12 апреля 2011

Я пытаюсь получить плавный переход при перенаправлении пользователей.Сначала потемнение страницы, затем перенаправление и и fadeIn.

Вот мой редирект 

if ( data.redirect != undefined )
{
        $("#toppanel").slideUp(1000);       
        $("#content").fadeOut(2000, function() {
        window.location = data.redirect;
    });

На моей следующей странице в заголовке есть javascript: 

jQuery(function ($) {

    $("div.container_16").first().hide();
    $(".grid_16").first().hide();

    $("div.container_16").first().fadeIn(2000);
    $(".grid_16").first().slideDown(4000);

Это почти работает, за исключением нескольких миллисекунд, гдевторая страница загружается, затем становится пустой и исчезает. Как это исправить?Нужно ли менять CSS или HTML?

Ответы [ 3 ]

1 голос
/ 12 апреля 2011

Простое решение этой проблемы:

CSS 

body{
    display:none;
}

JS 

jQuery(function ($) {
    $('body').show();
    $("div.container_16").first().hide();
    $(".grid_16").first().hide();
    $("div.container_16").first().fadeIn(2000);
    $(".grid_16").first().slideDown(4000);
}

Выдолжен знать, что 1 секунда - это много времени для веб-пользователя.И в основном, дополнительные 6 с, чтобы просто перейти на другую страницу, могут быть очень дорогостоящими для вашей пользовательской базы.Я надеюсь, что вы предложите решение без таких эффектов.

ОБНОВЛЕНИЕ

CSS 

/*
 * overflow => so you don't get a scrollbar
 * visiblity => so all content is hidden
 * background => so you get a black background
 */

.bodyExtra{
    overflow:hidden;
    visibility:none;
    background:#000;
}

JS 

jQuery(function ($) {
    $(document).ready(function(){
        $("div.container_16").first().hide();
        $(".grid_16").first().hide();
        $('body').removeClass('bodyExtra');
        $("div.container_16").first().fadeIn(2000);
        $(".grid_16").first().slideDown(4000);
    });
}

Логика заключается в том, чтобы ваша страница работала как буферная зона.Затем вы скрываете элементы, которые хотите добавить, удаляете класс из тела и все постепенно добавляете.

ОБНОВЛЕНИЕ 2013.09.01

Я вижу, этот ответ все еще генерируетнекоторый трафик, и я должен признать, что после первоначального ответа в 2011 году у меня есть дополнение, чтобы сделать

HTML / CSS 

<noscript>
    <style type="text/css">
        .bodyExtra{
            overflow:auto !important;
            visibility:visibile !important;
        }
    </style>
</noscript>

Это также можно сделатьс тегом <link rel="stylesheet" type="text/css" href="no-js.css" />.
Идея заключается в том, чтобы исправить проблему отключенного JavaScript, описанную theazureshadow в комментариях.

0 голосов
/ 12 апреля 2011

Не используйте чистый CSS, чтобы изначально скрыть содержимое. Если вы это сделаете, пользователи с отключенным JavaScript не увидят ваш контент. Вместо этого, скрывать, только когда доступен JavaScript. 

.js-enabled div.container_16,
.js-enabled .grid_16 {
  display: none;
}

Включите эту строку JavaScript в самом верху тела: 

$(document.body).addClass('js-enabled');

Затем в вашей функции анимации, после того, как вы спрятали .grid_16, включите эту строку, чтобы вернуть вещи в нормальное состояние: 

$(document.body).removeClass('js-enabled');

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

0 голосов
/ 12 апреля 2011

Вы получаете то, что называется «вспышкой нестандартного контента» или FUC. Вы можете поместить свою вторую страницу в контейнер и скрыть ее с помощью css (display: none;), а затем добавить ее при загрузке.

...