jQuery - posouvání elementu v různých směrech

Kdo jste se v životě setkal s jQuery, určitě znáte jeho funkce na slidování elementů – tedy .slideUp() a .slideDown(). Tento článek vám ukáže, jak pohybovat s bloky i do jiných směrů.

I přesto, že jQuery má pěknou sadu metod pro posouvání objektů - .slideDown(), .slideUp() a .slideToggle() – se nám někdy může hodit posouvání objektů v nějakém jiném směru. Koneckonců je velmi jednoduché to udělat.

Obrácení směru posouvání

S výchozími metodami jQuery pro vysouvání elementů je možné docílit toho, aby se prvek vysunul odshora dolů do prostoru, kde bude vidět. Ale co když chceme, aby se prvek vysouval odspoda nahoru? Pointa tohoto je ve správném nastavení CSS stylu. Ale nejprve si ukážeme, jak bude vypadat HTML struktura (která se nemění pro žádný z uvedených příkladů, až na název identifikátoru obalového divu).

<div id="slidebottom" class="slide">
  <button>vysuň</button>
  <div class="inner">vysunutí zespoda</div>
</div>

Abychom docílili u vnitřního divu efektu vysunutí nahoru, připevníme jeho spodní okraj ke spodku nejbližšího pozicovaného obalového prvku – v našem případě #slidebottom.

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

Ostatní vlastnosti jako je width, padding, margin nebo background-color si zvolte podle svého gusta, v příkladu nahoře byly popsány pouze vlastnosti nezbytně nutné k docílení rolovacího efektu odspoda nahoru.

Poznámka: Termínem pozicovaný prvek je myšlen prvek, kterému byla přiřazena CSS vlastnost position, ovšem s hodnotou jinou než static. Oba divy v ukázce jsou pozicované – jeden na hodnotu relative a druhý na hodnotu absolute.

Nyní můžeme napsat jQuery kód stejně jako kdybychom chtěli docílit tradičního vysouvacího pohybu.

$(document).ready(function() {
  $('#slidebottom button').click(function() {
    $(this).next().slideToggle();
  });
});

V praxi to vypadá následovně:

Horizontální posouvání

S animováním vlastnosti width

Elementy můžeme také posouvat doleva nebo doprava. Nejjednodušší cesta směřuje přes upravování hodnoty CSS vlastnosti width.

$(document).ready(function() {
  $('#slidewidth button').click(function() {
    $(this).next().animate({width: 'toggle'});
  });
});

V tomto případě není nezbytné, aby byl posouvaný element pozicovaný.

Určitě jste si v tomto příkladě všimli velmi nepěkných věcí, které dělá text napsaný v divu. Proto si ukážeme ještě jednu metodu rolování, a to s upravováním vlastnoti left.

S animováním vlastnosti left

Další možností, jak docílit srolování objektu doleva, je animování již zmíněné vlastnosti left. Tady už je důležité, aby byl element pozicovaný. Ovšem dávejte pozor, aby pozice nebyla nastavená na hodnotu static, pak se s ním nedá hýbat.

V této animaci je potřeba nejdříve vypočítat, jak daleko budeme objekt posouvat. Následující kód je založen na dvou předpokladech: (1) posouvaný prvek má outerWidth() stejně velký nebo větší, než je šířka divu, do kterého je vložen, a (2) posouvaný prvek má nastaveno left: 0;.

$(document).ready(function() {
  $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth() :
        0
    });
  });
});

Řádky 5 až 7 obsahují takzvaný podmínkový operátor. V příkladu to znamená: „Pokud je CSS vlastnost left rovna 0, posuň element doleva o tolik pixelů, kolik je jeho šířka (zahrnuje padding a border) a pokud není, posuň jej zpět na 0."

Pokud chcete, aby byl element úplně skrytý, je potřeba nastavit vnějšímu divu overflow: hidden;.

S animováním vlastnosti margin-left

Poslední věc, kterou si ukážeme, bude stejná animace jako v předchozím příkladě, ale směr pohybu nebude doleva, nýbrž doprava. Zde se stane upravovanou vlastností levý margin posouvaného divu. Zde je stále potřeba nastavit vnějšímu divu overflow: hidden, ale posouvaný div už nemusí být pozicován.

$(document).ready(function() {
  $('#slidemarginleft button').click(function() {
    var $marginLefty = $(this).next();
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
});

S trochou tvořivosti a pár úpravami můžete tyto základní horizontální posuvy použít k vytvoření horizontální harmoniky.