jQuery исчезает на другой странице

Question

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

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

Вот мой текущий код:

$(document).ready(function(){
          $("#button").click(function(){
            $(".left").animate(
                {left:'50%'}, 800, 'linear'
            );
            $(".right").animate(
                {right:'50%'}, 800, 'linear'
            );
            $(".top").stop(true, true).delay(800).animate(
                {top:'36px'}, 800, 'easeOutBounce'
            );
            $(".bot").stop(true, true).delay(800).animate(
                {top:'492px'}, 800, 'easeOutBounce'
            );
            $(document.body).delay(1900).fadeTo("slow", 0);
            setTimeout(function () 
            { window.location.href = "start.php"; }, 2000);
          });
        });

Answer 1

Нечто подобное должно работать, если вы готовы отказаться от перенаправления. Это должен быть плавный переход:

$(document).ready(function(){
  $("#button").click(function(){
    $('#hiddenContainer').load('URL TO OTHER DOC HERE');
    $(".left").animate(
        {left:'50%'}, 800, 'linear'
    );
    $(".right").animate(
        {right:'50%'}, 800, 'linear'
    );
    $(".top").stop(true, true).delay(800).animate(
        {top:'36px'}, 800, 'easeOutBounce'
    );
    $(".bot").stop(true, true).delay(800).animate(
        {top:'492px'}, 800, 'easeOutBounce'
    );
    $('SELECTOR OF YOUR OTHER CONTENT').delay(1900).fadeOut(800, function(){
        $('#hiddenContainer').fadeIn(800);
    });
  });
});

http://api.jquery.com/load/

Это общая идея, надеюсь, это поможет!

Answer 2

Это будет работать, только если вы:

• загрузить вторую страницу через AJAX в память или скрытый DIV
• исчезать то, что уже на экране
• поменять новую страницу в DOM (которая настроена на уже исчез)
• исчезать в новом содержании

Answer 3

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