JQuery: плавный переход между страницами
Сделаем красивую штуку, при загрузке страницы пусть наш контент плавно открывается. Согласитесь, что это весьма стильно! Реализовывать будем на 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: плавный переход между страницами”
Прокомментировать
Рубрики
- javascript
- SEO
- Smarty
- UIPI
- Боремся со СПАМом
- Верстка
- Движки форумов
- Железо
- Забавно
- Интернет в лицах
- Интернет-магазины
- Новости
- Обзоры сайтов
- Обо всем
- Полезные скрипты
- Работа с CMS
- Создание сайтов
- Уроки рекламы
- Шаблоны
Облако меток
SEO
форум
контент
IE
бесплатно
блог
pr
файл
адрес
жк
страница
магазин
сервер
html
google
поисковик
фон
сайт
продвижение
форма
бот
проект
интернет
деньги
эффект
заказ
php
веб
показ
товар
Прикрепил к сайту, но без успеха. Не могли бы Вы сделать демо-страницу, чтобы было видно как должно быть.
Посмотрите ошибку при добавлении. Вполне может быть. Демо-страницы скриптов руки не доходят сделать. Пример рабочего скрипта на сайте
Ошибочка в коде, в функции загрузки, а так всё работает замечательно.
Добрый день. Сразу прошу – не судите строго – в javascript практически ничего не понимаю. Установил данный скрипт на свой сайт. В GoogleChrome все отлично, и работает и красиво – все гуд, но у остальных браузеров есть проблема:
При нажатии на кнопку браузера “назад”, либо при использовании функции HistoryBack страница показывается в конечном варианте (после функции FadeOut). Подскажите пожалуйста – как это исправить?
Нужно повесить событие на переход по ссылке
я вас не совсем понял. Я могу повесить событие на кнопку “назад”, которую я сам размещаю на странице, но как быть с кнопкой “назад” в браузере, либо переход назад при нажатии кнопки backspace??? Если не сильно трудно: не могли бы вы мне написать либо на mail(andrukhov@mail.ru), либо в skype(andrukhov) (возможно я изначально не так что-то написал)