Авг

11

6

JQuery: плавный переход между страницами

K_E_V_in    javascript     CSS, html, javascript, jquery, js, php, pr, библиотека, контент

Сделаем красивую штуку, при загрузке страницы пусть наш контент плавно открывается. Согласитесь, что это весьма стильно! Реализовывать будем на jquery.

Для реализации задуманного нам понадобится:
- библиотека JQuery;
- код, приведенный ниже;
- немного свободного времени и ровные руки.

Для начала подключим библиотеку в блок head стандартным способом:

1	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

Затем нужно написать функцию загрузки контента и его плавного изменения. Вот она:

1 2 3

<script type="text/javascript">// < ![CDATA[ // < ![CDATA[  $(document).ready(function() { $("body").css("display", "none"); $("body").fadeIn(2000); }); // ]]></script>

Если же мы хотим, чтобы загрузка происходила через ссылку, то пишем такое:

1 2 3

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

Обновляем страницу и радуемся результату!

• Ищем классные статусы в контакте? Сегодня их сделано огромное количество. Выбирайте на свой вкус!
• Лечение “химическими” лекарствами зачастую не дает должного результата. Отличный выход -вербена!

Понравилась заметка? Поделись!

6 коммент. к записи “JQuery: плавный переход между страницами”

• makemulator 4 сентября 2010 - 16:11

  Прикрепил к сайту, но без успеха. Не могли бы Вы сделать демо-страницу, чтобы было видно как должно быть.
• K_E_V_in 4 сентября 2010 - 16:14

  Посмотрите ошибку при добавлении. Вполне может быть. Демо-страницы скриптов руки не доходят сделать. Пример рабочего скрипта на сайте http://hidravlika.by
• 123456789 23 октября 2010 - 5:24

  Ошибочка в коде, в функции загрузки, а так всё работает замечательно.
• Евгений 27 августа 2011 - 20:58

  Добрый день. Сразу прошу – не судите строго – в javascript практически ничего не понимаю. Установил данный скрипт на свой сайт. В GoogleChrome все отлично, и работает и красиво – все гуд, но у остальных браузеров есть проблема:
  При нажатии на кнопку браузера “назад”, либо при использовании функции HistoryBack страница показывается в конечном варианте (после функции FadeOut). Подскажите пожалуйста – как это исправить?
• K_E_V_in 28 августа 2011 - 21:05

  Нужно повесить событие на переход по ссылке
• Евгений 28 августа 2011 - 22:18

  я вас не совсем понял. Я могу повесить событие на кнопку “назад”, которую я сам размещаю на странице, но как быть с кнопкой “назад” в браузере, либо переход назад при нажатии кнопки backspace??? Если не сильно трудно: не могли бы вы мне написать либо на mail(andrukhov@mail.ru), либо в skype(andrukhov) (возможно я изначально не так что-то написал)