Vizuální efekty - JQuery

vydáno: 12.12.2016, seriál: JQuery

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

Témata

Seriály

Vizuální efekty - JQuery

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

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

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

Vlastní animace - animate()

Seriál JQuery

Seznam všech článků seriálu: