Эффект затухания и затухания между страницами

Я пытаюсь сделать некоторые эффекты перехода для моей страницы.

Цель состоит в том, чтобы страница исчезала при первом входе, а затем, когда вы щелкаете ссылку, страница будет исчезать и исчезать на целевой странице. Но он не получит URL-адрес назначения, поэтому, когда я нажимаю на ссылку, URL-адрес меняется на www.example.com/#undefined.

Какие-либо предложения?

jQuery.holdReady(true);
jQuery("body").css("opacity", 0);
jQuery.holdReady(false);
jQuery(function ($) {
    $("body").fadeTo(1500, 1);
    $(document).on("click", "a", function (event) {
        event.preventDefault();
        $("body").fadeTo(1500, 0, function () {
            // get the href attribute
            var newUrl = $(this).attr("href");

            // veryfy if the new url exists or is a hash
            if (!newUrl || newUrl[0] === "#") {
                // set that hash
                location.hash = newUrl;
                return;
            }

            // now, fadeout the html (whole page)
            $("body").fadeTo(1500, 1, function () {
                // when the animation is complete, set the new location
                location = newUrl;
            });
            // prevent the default browser behavior.
            return false;
        });
    });
});

javascript jquery fadein fadeout jquery-effects
person Mikkel Madsen    schedule 14.05.2015    source источник
comment
$(это).attr(href); вероятно, ссылается на тело, а не на a, поэтому у него нет href   -  person Tero Tolonen    schedule 14.05.2015

Ответы (1)


arrow_upward
1
arrow_downward

Во внутренней функции this не указывает на элемент <a>, по которому был сделан щелчок. Переместите разрешение newUrl за пределы этой функции:

jQuery.holdReady(true);
jQuery("body").css("opacity", 0);
jQuery.holdReady(false);
jQuery(function ($) {
    $("body").fadeTo(1500, 1);
    $(document).on("click", "a", function (event) {

        // get the href attribute
        // "this" is still the <a> element here
        var newUrl = $(this).attr("href");

        event.preventDefault();
        $("body").fadeTo(1500, 0, function () {

            //here, where you were trying to get the url, "this"
            //points to the animated element, ie body


            // veryfy if the new url exists or is a hash
            if (!newUrl || newUrl[0] === "#") {
                // set that hash
                location.hash = newUrl;
                return;
            }

            //just update the location without fading in at this point
            location = newUrl;

            // prevent the default browser behavior.
            return false;
        });
    });
});
person James Thorpe    schedule 14.05.2015
comment
Хорошо:D Он возвращает правильный URL :) Пока все хорошо. Но это действует странно. он исчезает и исчезает, а затем переходит на новую страницу. - person Mikkel Madsen; 14.05.2015
comment
Я не думаю, что вам нужен внутренний fadeTo - я отредактирую свой ответ. - person James Thorpe; 14.05.2015
comment
Это удалило постепенное появление перед сменой текущей страницы, но я не могу понять, как получить эффект постепенного появления при начальной загрузке страницы и исчезновение при входе на другую страницу. - person Mikkel Madsen; 14.05.2015
comment
Другая страница должна была бы нести ответственность за свое собственное исчезновение, если только вы не начнете рассматривать динамическую замену контента на существующей странице, но это совершенно другое дело, чем то, что вы делаете здесь - person James Thorpe; 14.05.2015
comment
Я заставил это работать. Скрипт у меня был до ‹/body›... Теперь работает фейдейн с первых строк. Спасибо за вашу помощь! Есть ли способ избежать мерцания страницы? Когда я захожу на страницу контактов по ссылке в индексе, я вижу страницу в течение 1 секунды, а затем она исчезает. Это ошибка? - person Mikkel Madsen; 14.05.2015
comment
Скорее всего, вы увидите его до того, как jquery сработает и установит непрозрачность на 0. Вы можете сделать это в css самостоятельно, не используя javascript, но тогда вы рискуете, что он никогда не появится для людей с отключенным javascript. - person James Thorpe; 14.05.2015
comment
Да, это было бы очень антипрогрессивным усовершенствованием :P Хммм. Эффект мерцания появляется только в Chrome и Opera, но не в Safari, Firefox или IE:/ - person Mikkel Madsen; 14.05.2015
comment
Я добавил непрозрачность: 0; к тегу body и сделал тег noscript в голове с помощью: body { opacity: 1 !important; } Кажется, теперь работает :) Показывает страницу с отключенным JS. Большое спасибо за ваш вклад! - person Mikkel Madsen; 14.05.2015