jQuery слайдинг в разных направлениях

Я решил немного побаловаться переводами, ввиду чего подобрал несколько статей, посвященных совершенно разным вопросам веб-разработки. Первой из них оказалась заметка Карла Сведберга, описывающая возможности jQuery по реализации нестандартных эффектов сворачивания блоков — слайдеров. Перевод достаточно вольный. Я не старался дать подстрочник, как это часто делают другие, дабы перевод не был косноязычным. Конструктивная критика приветствуется. И так…

Несмотря на то, что jQuery имеет отличный набор для реализации слайдеров — .slideDown(), .slideUp() и .slideToggle(), иногда может потребоваться нестандартный эффект слайдинга. К счастью, это не является проблемой.




Вертикальный слайдер в обратном направлении

Встроенные методы слайдинга реализуют анимацию развертывания блока вниз. Но что, если мы хотим разворачивать слайдер наоборот — снизу вверх? Трюк заключается в использовании несложных CSS стилей. Давайте начнем с базовой HTML разметки:

<div class="demo-slide" id="demo-slidebottom">
	<button>Пуск</button>
	<div class="inner">Разворачивание снизу вверх</div>
</div>

Для того чтобы развернуть внутренний DIV вверх, мы прижмем его нижнюю границу к нижней границе родительского блока (в данном примере – #demo-slidebottom).

.demo-slide {
	position: relative;
}

.slide .inner {
	position: absolute;
	left: 0;
	bottom: 0;
}

Для данного примера использовались и другие свойства, такие как width, padding, margin и background-color, но в листинге отражены только те, что необходимы для реализации эффекта сворачивания.

Теперь мы можем использовать тот же jQuery код, какой использовали бы при реализации традиционного слайдера.

$(document).ready(function() {
	$('#demo-slidebottom button').click(function() {
		$(this).next().slideToggle();
	});
});
Разворачивание снизу вверх

Горизонтальные слайдеры

Мы также можем сворачивать элементы влево и вправо. Наиболее простой способ заключается в использование анимации свойства width.

$(document).ready(function() {
	$('#slidewidth button').click(function() {
		$(this).next().animate({width: 'toggle'});
	});
});
Разворачивание справа налево

Несмотря на то, что с анимацией ширины блока все в порядке, я совершенно не в восторге от поведения текста, который находится внутри блока. Один из способов избежать переноса текста основывается на использовании CSS свойства white-space: nowrap, но это все испортит, если количество текста будет превышать ширину блока.

Сворачивание влево

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

Нам необходимо определить, насколько именно сдвигать элемент влево. Следующий код базируется на двух основных условиях: первый – анимируемый элемент должен иметь ширину (с учетом паддинга и бордеров) большую или равную ширине родительского элемента, второй – его свойство left должно быть установлено в 0. Возможно, вам потребуется изменить код, если он вам не подходит.

$(document).ready(function() {
	$('#demo-slideleft button').click(function() {
		var $lefty = $(this).next();

		$lefty.animate({
			left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
		});
	});
});

В строке 6 используется тернарный оператор, который определяет поведение слайдера. Если левый отступ от края родителя равен нулю, то мы сдвигаем элемент влево на величину, равную его ширине, в противном случае устанавливаем левый отступ обратно в ноль.

Разворачивание справа налево

Если мы хотим, чтобы буду свернутым элемент не был виден, необходимо установить свойство overflow: hidden; для родительского контейнера.

Анимация левого отступа

Наконец, мы можем достичь того же эффекта, используя анимацию на основе свойства margin-left. В данном случае нам также потребуется определить свойство overflow: hidden; для родительского контейнера, но элемент, который мы будем двигать, может иметь относительное или статическое позиционирование.

$(document).ready(function() {
	$('#demo-slidemarginleft button').click(function() {
		var $marginLefty = $(this).next();

		$marginLefty.animate({
			marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
		});
	});
});

Для разнообразия, в данном примере, мы будем сворачивать элемент вправо.

Разворачивание слева направо

Оригинал: «Slide Elements in Different Directions» (by Karl Swedberg)

Комментарии (8)

  1. Владимир

    А где можно увидеть код CSS для этих примеров? А то не совсем ясно как делать анимацию с права налево, что бы текст не смещался

  2. Владимир

    Самый конечно интересный вариант — это Сворачивание влево у тебя, т е когда выезжает цельный блок с края экрана например да, а как думаешь, можно ли сделать только на jQuery что бы этот блок выезжал с середины экрана, вот как тут http://ruseller.com/lessons/les808/demo/index.html, но тут использован menu matic, как работает такая анимация я так и не понял честно говоря. Я так понимаю, что при правильном использования твоего метода Сворачивание влево, решит проблему без использования menumatic? просто если анимировать width у скрытого сабменю, получается не так красиво, как выезжающий цельный блок с края экрана. Буду признателен за любой совет

  3. Владимир

    анимировать width у скрытого сабменю, я имею ввиду вот этот вариант (Горизонтальные слайдеры)
    $(document).ready(function() {
    $(‘#slidewidth button’).click(function() {
    $(this).next().animate({width: ‘toggle’});
    });
    });

    но он не так красиво смотрится, как Сворачивание влево

    • Владимир

      метод твой как работает я понял, но проблему не решает увы, исчезает, только если заезжает за край экрана, а как бы это сделать, что бы исчезал в середине экрана например или у края родительского элемента? есть предположения?)

  4. Дмитрий

    Добрый день! Использую ваш способ «Сворачивание влево», спасибо.
    Всё хорошо, однако нашел один неприятный баг — когда контент спрятан, по кнопке проходит даблклик, пришлось анбиндить кнопку до начала анимации и включать ее после…

Добавить комментарий для Владимир Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *