Страница FadeIn и FadeOut Transition

Question

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

Мой код выглядит следующим образом:

$("body").load(function() { 
    $(this).fadeIn(200); 
}); 

$("a").click(function() { 
    $link = $(this).attr("href"); 
    $("body").fadeOut(200); 
    window.location.replace($link); 
}); 

Это не похоже, чтобы сделать переходы FadeIn и FADEOUT. Это все еще обычная pageload.

Answer 1

Первых скрыть тело страницы при загрузке страницы, то вам необходимо поместить Перенаправляющую линию в полной функции fadeOut

Попробуйте этот код:

$(document).ready(function() { 
    $('body').hide().fadeIn(200); 
    $("a").click(function(e) { 
     e.preventDefault(); 
     $link = $(this).attr("href"); 
     $("body").fadeOut(200,function(){ 
      window.location = $link; 
     }); 
    }); 
}); 

Answer 2

Вам необходимо скрыть элемент изначально либо .hide(), либо с помощью CSS display:none;.

$(document).ready(function() { 
    $('body').hide().fadeIn(200); 
}); 

Answer 3

Вы должны используйте setTimeout во времени window.location.replace() для выполнения после того, как текущий body погас как:

$("a").click(function() { 
    $link = $(this).attr("href"); 
    $("body").fadeOut(200); 
    setTimeout(function(){ 
     window.location.replace($link); 
    },200); 
    return false; 
}); 

Не забудьте вернуть false в конце функции иначе действие по умолчанию для ссылки click i.e перенаправление предшествует любому другому действию, связанному с якорем.

Но, искренне, это даст вам эффект плавного выцветания с текущей страницы, но не оказывает плавного воздействия на перенаправленную страницу, если только она не реализована вами.