VDS за 300р от нашего партнера SpaceWeb
[1]
09 Янв 2015, 02:40

JQuery переход по ссылке с эффектом сдвига

Этот пост предназначен на разъяснение о том, как пользоваться задержками и эффектами анимации в JQuery.

Для начала мы получили компонент всего контента, который будем сдвигать, а точнее его позицию за экраном(слева).

var w = $(".all").width() + window.pageXOffset;

Затем за две секунды мы передвигаем наш контент в центр.

$(".all").css({'position':'absolute','left': w + 'px'}).animate({ left: '-=' + ($('.all').width()+160) },2000, function () { setTimeout(2000,$(".all").css({'position':''})); });

Тут мы говорим, что по нажатию на любую ссылку мы смещаем вправо весь контент за 2 секунды и переходим по нужной ссылке.

$("a").click(function(event){ event.preventDefault(); linkLocation = this.href; $(".all").css({'position':'absolute'}).animate({ left: '-=' + w },2000,function () { setTimeout(2000, redirectPage()); }); });

Вот собственно сам переход:

function redirectPage() { window.location = linkLocation; }

Весь код представлен ниже.

$(document).ready(function() { var w = $(".all").width() + window.pageXOffset;
$(".all").css({'position':'absolute','left': w + 'px'}).animate({ left: '-=' + ($('.all').width()+160) },2000, function () { setTimeout(2000,$(".all").css({'position':''})); });
$("a").click(function(event){ event.preventDefault(); linkLocation = this.href; $(".all").css({'position':'absolute'}).animate({ left: '-=' + w },2000,function () { setTimeout(2000, redirectPage()); }); }); function redirectPage() { window.location = linkLocation; } });

#jquery #javascript #верстка

27 просмотров
0
Loading...
Комментарии (0)

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 2795]
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 2305]
[118]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 2236]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 2021]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 1940]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 1932]
[50]
22 Ноя 2011, 14:17
Как удалить vsftpd
[просмотров 1517]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 1496]

Вести с Хабра