jQuery návod (5) Efekty

Vítejte v pátém díle našeho seriálu o jQuery. Dnes se budeme věnovat jedné z nejzajímavějších oblastí jQuery efektům. Díky nim můžeme našim webovým stránkám dodat poutavost, dynamiku a moderní vzhled. 1. Co jsou to efekty v jQuery? Efekty v jQuery nám umožňují animovat prvky na stránce. Může jít o změnu velikosti, průhlednosti, pozice nebo jiných vlastností. Přestože můžete efekty vytvářet čistě pomocí CSS, jQuery nám nabízí mnohem jednodušší a pružnější způsob, jak toho dosáhnout. 2. Základní efekty fadeIn() a fadeOut(): Animují průhlednost prvku. $( #prvek ).fadeIn(); // postupně zobrazí prvek $( #prvek ).fadeOut(); // postupně schová prvek slideUp() a slideDown(): Animují výšku prvku. $( #prvek ).slideUp(); // sbalí prvek $( #prvek ).slideDown(); // rozbalí prvek toggle(): Přepíná mezi zobrazením a skrytím prvku. $( #prvek ).toggle(); // pokud je prvek viditelný, schová ho a naopak 3. Vlastní animace Funkce .animate() vám umožní vytvořit vlastní animace. Můžete specifikovat, jaké vlastnosti chcete animovat a jak rychle. $( #prvek ).animate({ opacity: 0.5, // změní průhlednost na 50% width: 70% , // změní šířku na 70% původní hodnoty marginLeft: 50px // posune prvek o 50px doleva }, 1500); // doba trvání animace je 1500ms (1,5 sekundy) 4. Řetězení efektů V jQuery můžete řetězit několik efektů za sebou: $( #prvek ).fadeIn().slideUp().slideDown().fadeOut(); 5. Callback funkce Pokud chcete po dokončení animace vykonat další akci, můžete použít tzv. callback funkci. $( #prvek ).fadeOut(function() { alert( Animace byla dokončena! ); }); Po dokončení efektu fadeOut() se zobrazí vyskakovací okno s hláškou. Závěr Efekty v jQuery nám otevírají dveře k tvorbě moderních a dynamických webových stránek. Ačkoli může být lákavé používat je hojně, je dobré si uvědomit, že méně často znamená více. Efekty by měly zlepšovat uživatelskou zkušenost, ne ji zhoršovat. Přemýšlejte o svých návštěvnících a používejte efekty s rozumem. V dalším díle se podíváme na způsoby, jak můžeme s jQuery upravovat prvky a jejich obsah. Děkuji za čtení a těším se na další setkání! The post jQuery návod (5) Efekty appeared first on Tutoriály česky.

projít na článek

jQuery návod (12) Práce s poli

V dnešním díle seriálu se ponoříme do práce s poli v kontextu jQuery. Ačkoli mnoho z toho, co budeme procházet, lze provádět čistým JavaScriptem, jQuery nám nabízí několik nástrojů, které mohou proces usnadnit a zefektivnit. 1. Vytváření pole s jQuery

projít na článek

jQuery návod (10) Práce s cookies

V desátém díle našeho seriálu se ponoříme do světa cookies. Cookies jsou malé textové soubory, které webové stránky ukládají na počítači uživatele za účelem uchování informací mezi jednotlivými sezeními. S jejich pomocí můžeme například rozpoznat návštěvn

projít na článek

jQuery návod (11) Užitečné utility

V jedenáctém díle seriálu se zaměříme na specifickou část jQuery utility. I když jste se již setkali s mnoha funkcemi a metodami, které jQuery nabízí, existuje mnoho dalších nástrojů, které nejsou tak známé nebo často používané, ale mohou být v určitých

projít na článek

jQuery návod (14) Tipy a triky

V dnešním posledním díle seriálu o jQuery si představíme několik tipů a triků, které vám pomohou efektivněji pracovat s touto knihovnou. jQuery je obrovská knihovna s mnoha funkcemi, ale dnes se zaměříme na několik klíčových rad, které by vám mohly usnadn

projít na článek

jQuery návod (9) Práce s AJAXem

V devátém dílu našeho seriálu o jQuery se ponoříme do světa AJAXu. AJAX je zkratka pro Asynchronous JavaScript and XML, což je technika umožňující webovým stránkám načítat data ze serveru asynchronně, tj. bez nutnosti znovunačítání celé stránky. Tato t

projít na článek