Od provozovatele projektu Rychlost.CZ

Vizuální efekty - JQuery

vydáno: 12.12.2016, seriál: JQuery | komentářů: 0

Toto je 3. díl seriálu JQuery, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Pojďme se teď podívat jak našim webovým stránkám dodat kouzlo s nějakými vizuálními efekty, které nám jQuery dává k dispozici.

Skrytí a zobrazení - show(), hide() a toggle()

Schová (hide), zobrazí (show) nebo přepne (toggle) element do opačného stavu viditelnosti.

$(výběr).hide() - schová element bez efektu.

$(výběr).show() - zobrazí element bez efektu.

$(výběr).toggle() - bez efektu schová element, pokud je viditelný nebo jej zobrazí, pokud není vidět.

V následujících příkladech můžete místo funkce použít jakoukoli ze těchto tří funkcí, tedy show, hide nebo toggle:

$(výběr).funkce([milisekundy]) - přidá efekt schování nebo zobrazení, který bude trvat číslem stanovenou dobu v milisekundách. Například: $('#obsah').show(1000) - zobrazí element #obsah za sekundu.

$(výběr).funkce(<milisekundy> [, callback]) - kromě doby trvání můžete těmto funkcím přidat i callback funkci, která se provede, když efekt doběhne do konce. Všechny efekty jsou samozřejmě asynchronní.

Ukázka:

Zobrazení

CSS
nav a { display: block; }
Použité vlastnosti: display
Javascript
$(document).ready(function()
{
$('nav a').hide();
showNextItem();
});
var itemsTotal = $('nav a').length;
var currentItem = 1;
function showNextItem()
{
if (currentItem <= itemsTotal)
{
$('nav a:nth-child('+currentItem+')').show(2000, function()
{
currentItem++;
showNextItem();
});
}
}
HTML
<nav>
<a href="/home">Home</a>
<a href="/sitemap">Site Map</a>
<a href="/o-nas">About</a>
<a href="/kontakt">Contact</a>
</nav>
Použité tagy: <nav>, <a>

Klouzání - slideDown(), slideUp() a slideToggle()

Stejné jako show, hide a toggle (popořadě). Element si schová nebo zobrazí se "slide" efektem.

Ukázka:
CSS
.more { display: none; }
Použité vlastnosti: display
Javascript
function toggleReadMore(articleId)
{
$('#article'+articleId+'-more').slideToggle();
}
HTML
<button onclick="window.toggleReadMore(1)">Read More</button>
<p id="article1-more" class="more">
Hello world!<br>
Hello world!<br>
Hello world!
</p>
Použité tagy: <button>, <p>, <br>

Zjevení - fadeIn(), fadeOut(), fadeToggle()

Fungují opět podobně jako předchozí funkce s efekt "zjevení" nebo "rozetmění". 

Ukázka:

Přepínání záložek.

CSS
.tab { display: none; }
#tab-1 {display: block; }
Použité vlastnosti: display
Javascript
function switchToTab(tabId)
{
$('.tab:visible').fadeOut(500, function()
{
$('#tab-'+tabId).fadeIn(500);
});
}
HTML
<nav>
<a href="#" onclick="window.switchToTab(1)">Section 1</a> |
<a href="#" onclick="window.switchToTab(2)">Section 2</a> |
<a href="#" onclick="window.switchToTab(3)">Section 3</a>
</nav>
<section id="tab-1" class="tab">
<h1>Section 1</h1>
<p>Content of section 1.</p>
</section>
<section id="tab-2" class="tab">
<h1>Section 2</h1>
<p>Content of section 2.</p>
</section>
<section id="tab-3" class="tab">
<h1>Section 3</h1>
<p>Content of section 3.</p>
</section>
Použité tagy: <nav>, <a>, <section>, <h1>, <p>

Vlastní animace - animate()

Funkce animate() nám dává možnost použít přechod z jedné hodnoty do jiné hodnoty jakékoli počitatelné CSS vlastnosti elementu. Například width je počitatelná CSS vlastnost a může být tedy animována:

$(výběr).animate(cssVlastnosti [, trvání] [, dokončenoCallback]) - cssVlastnosti jsou objekt: nové hodnoty CSS vlastností, které by měl element mít na konci animace. Použít i značku přičtení += nebo odečtení -=Trvání je číslo: v milisekundách jak dlouho by měl efekt trvat.

Ukázka:

Pulzující nadpis.

CSS
h1 { color: black; }
Použité vlastnosti: color
Javascript
function increaseAnimation()
{
$('h1').animate({
'font-size': '+=40px',
'letter-spacing': '1em'
},
1000,
function()
{
window.decreaseAnimation();
});
}
function decreaseAnimation()
{
$('h1').animate({
'font-size': '-=40px',
'letter-spacing': '0'
},
1000,
function()
{
window.increaseAnimation();
});
}
$(document).ready(window.increaseAnimation);
HTML
<h1>Heading</h1>
Použité tagy: <h1>

Tímto máme za sebou práci s jQuery efekty. Samozřejmě by se všechno do jednoho článku nevešlo. Více informací naleznete v referenci jQuery.

Párkrát jsme zde použili jednu výjimečnou věc:

$(document).ready(funkce)

Jedná se o spuštění funkce při určité události, konkrétně kompletního načtení stránky. Na práci s událostmi se podíváme v dalším díle seriálu.

jQuery: návody a průvodce
JavaScript: návody a průvodce