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

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

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

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки: