1

Надо чтобы переход был плавным как вот тут: http://kerrigan.su/koshkin/ Когда одна страница начинает исчезать - вторая одновременно начинает появляться. Есть стандартный скрипт для плавного перехода:

<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none"); 
$("body").fadeIn(500); 
$("a.fade").click(function(event){ 
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); 
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>

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

1
  • @EvaKerrigan, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). Commented 17 дек. 2014 в 10:04

2 ответа 2

1

На сайте скорей всего идет наложение DIVов через z-index с position absolute.

Ваша задача - через CSS свойство opacity постепенно уменьшать прозрачность одного дива, и увеличивать прозрачность нужного. Затем, по достижении opacity:0 скрываемого дива присвоить ему значение display:none.

2 варианта:

  1. Прописать в CSS свойства "transition: all 1s ease-out!important"(или easyIn) и скрытие дива делать просто с зарежкой delay() или SetTimeOut.
  2. Попробовать менять opacity методом .animate(время, function(){})(сам не пробовал, не могу сказать). в функции пропишите изменение css display.
0

Меняя window.location, вы перезагружаете страницы, на приведенном вами сайте этого нет, равно как и вообще какой-либо дополнительной загрузки. Пример использует библиотеку jshowoff, просто элементы управления вынесены в центр.

1
  • Да, я знаю про jshowoff. Я этот сайт и сделала. Но я его сделала сайт внутри слайдера. А когда стала пытаться вставлять картинки вместо кнопок, чтобы тени были нарисованные и вставлять дубль-гис виджет карту - оказалось это невозможным внутри слайдера. И я переделала этот сайт kerrigan.su/koshkin просто под сайт без слайдера, с обычными 4-мя страницами и кнопками kerrigan.su/koshkinneslide. На нем все работает. И картинки вместо кнопок, и виджет дубль гис... Но заказчику принципиально чтобы остался этот эффект плавной смены страниц. Commented 20 февр. 2014 в 21:55

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.