[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 #верстка

14 просмотров
Комментарии (0)

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

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Нетология
Лучшее
[49]
17 Сен 2011, 15:13
FileZilla перетаскивание файлов
[просмотров 978]
[2]
26 Июн 2018, 23:10
Как в React сделать поле input file с кнопкой?
[просмотров 971]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 832]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 828]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 822]
[118]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 805]
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 764]
[4]
19 Июн 2018, 16:24
React и ReactDOM
[просмотров 665]
Aliexpress WW