Как известно, jQuery имеет собственные функции для реализации эффекта “соскальзывающих” элементов – .slideUp(), .slideDown() и slideToggle(). Но бывают такие случаи, когда нам нужно реализовать скольжение элементов в совершенно других направлениях, нежели это делают данные функции.
К счастью это довольно легко реализуется – под катом увидите как.
Скольжение в обратном направлении
С помощью встроенных методов мы можем реализовать скольжение “сверху вниз”. Но что делать если нам необходимо сделать “выезжающий снизу” элемент? Давайте добавим немного хитрого CSS и наша проблема будет решена!
Итак, html:
|
1 2 3 4 |
<div id="slidebottom" class="slide">
<button>slide it</button>
<div class="inner">Slide from bottom</div>
</div> |
и css:
|
1 2 3 4 5 6 7 8 |
.slide {
position: relative;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
} |
В примере ниже определены и другие свойства элементов – высоту, ширину, цвет, отступы и так далее.
Теперь мы можем использовать jQuery точно также, как и в традиционном случае реализации скользящего эффекта:
|
1 2 3 4 5 |
$(document).ready(function() {
$('#slidebottom button').click(function() {
$(this).next().slideToggle();
});
}); |
Демо:
Горизонтальное скольжение
Способ первый – анимация с помощью изменения свойства width
Для реализации такого эффекта будем изменять свойство width элемента. Разметка останется прежней (однако указывать абсолютное и относительное позиционирование элементов в данном случае не обязательно). А JavaScript код будет другим:
|
1 2 3 4 5 |
$(document).ready(function() {
$('#slidewidth button').click(function() {
$(this).next().animate({width: 'toggle'});
});
}); |
Пример:
Единственная проблема данного способа – обрезание и перенос текста, находящегося внутри выдвигающегося элемента (в том случае, если текста достаточно много), поэтому рассмотрим еще два способа.
Изменение свойства left
У этого метода есть также один недостаток – у “подвижного” элемента должно быть задано положение с помощью CSS (свойства left и top, второе необязательно), а контейнер должен иметь свойство overflow установленное как hidden.
|
1 2 3 4 5 6 7 8 |
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?-$lefty.outerWidth() : 0
});
});
}); |
Сразу же пример:
Изменение свойства margin-left
В данном случае нам также необходимо иметь overflow: hidden у контейнера, но позиционировать подвижный элемент уже необязательно.
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() {
$('#slidemarginleft button').click(function() {
var $marginLefty = $(this).next();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
});
});
}); |
А работает это так:
