jQuery - jednoduché efekty
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

jQuery - jednoduché efektyjQuery - jednoduché efekty

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

jQuery - jednoduché efekty

Google       Google       31. 7. 2009       24 353×

V tomto článku si ukážeme vytváření jednoduchých funkcí jQuery pro vizuální efekty.

Reklama
Reklama

V knihovně jQuery nalezneme škálu velmi pěkných animačních efektů, jako je .show('rychlost') a .hide('rychlost'), .slideUp() a .slideDown(), .fadeIn() a .fadeOut(). Knihovna má i dvojici přepínacích metod, kterými jsou .toggle('rychlost') a .slideToggle().

Každá z těchto metod má nastavitelnou rychlost, povolávání a tzv. callback funkci, což je další funkce, která se vykoná po dokončení funkce, v níž je jako callback funkce vložena. Metody .show() a .hide() bez nastavené rychlosti okamžitě zobrazí nebo skryjí označenou sadu elementů bez žádné speciální animace. Pokud ovšem zahrneme parametr rychlosti, budou označené elementy zobrazovány a skrývány animováním jejich výšky, šířky a průhlednosti současně. Metoda .toggle() používá dva parametry, které jsou spouštěny střídavě. Všechny metody bez nastavitelné rychlosti mají přednastavenou dobu trvání na 400 ms.

Metoda .animate()

jQuery interně používá další metodu .animate() k definování těchto zkrácených metod efektů a zároveň nám umožňuje použít .animate() k tomu samému. Takže si vytvoříme vlastní metodu, kterou poté budeme moci použít stejně jako například .slideToggle().

Vlastní animační metody

S výše zmíněnou metodou .animate() si nyní vytvoříme vlastní metodu .fadeToggle(), kterou vložíme přímo do jQuery. Nejprve vytvoříme funkci s patřičnými parametry a nakonec pomocí this.animate() vrátíme efekt, který chceme.

jQuery.fn.fadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};

Teď, když budeme chtít efekt použít, zavoláme ho stejně jako každou jinou metodu, kterou jQuery již zahrnuje.

$(document).ready(function() {
  $('#fade').click(function() {
    $(this).next().fadeToggle('slow');
  });
});

Tato funkce nám mění průhlednost elementu, můžeme ovšem kombinovat i další efekty. Například zkombinujeme změnu průhlednosti elementu se změnou jeho výšky,čímž docílíme o něco jiného efektu. Základ funkce bude stejný, jen přidáme parametr height.

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);  
};

Efekt rolety

Změna v této funci bude taková, že místo změny výšky elementu budeme manipulovat s jeho polohou, a to nahoru a dolů. Efekt bude sám o sobě trochu nedotažený, ale jako první krok bude potřeba pro správné fungování skriptu nastavit několik CSS hodnot.

#box {
  padding: 10px;
  height: 100px;
  width: 100px;
  background: #e459e9;
}
#box-outer {
  overflow: hidden;
  height: 120px;
  margin: 20px;
}

Všimněte si, že zde máme nastylované dva prvky. První z nich bude použit v samotném HTML kódu, ale druhý, který napomáhá námi chtěnému efektu, bude vytvořen až naším skriptem. Velmi důležité vlastnosti druhého nastylovaného prvku jsou overflow: hidden; a height: 120px;. Vlastnost overflow umožní prvku #box zdánlivě zmizet, jakmile se bude pohybovat nahoru, zatímco výška (která je složená z výšky prvku #box a jeho paddingu nahoře i dole - proto 120px) bude chránit zbytek stránky, aby nepřekryla prostor vyhrazený pro již zmizelý #box.

jQuery.fn.blindToggle = function(speed, easing, callback) {
  var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
  return this.animate({marginTop: parseInt(this.css('marginTop')) <0 ? 0 : -h}, speed, easing, callback);  
};

Vypadá to relativně jednoduše, ale můžeme narazit na pár věcí, které mohou být, zvláště začátečníkům, nejasné. První řádek uvnitř funkce deklaruje proměnnou pro výšku this s jeho horním a dolním paddingem ("this" odkazuje na cokoliv v prvku, ve kterém je funkce následně použita). JavaScriptová funkce parseInt() prohledává řetězec, dokud nenarazí na nečíselnou hodnotu. Nalezených nečíselných hodnot se zbaví, z číselných hodnot vytvoří hodnotu typu integer. Takže například z řetězce "10px" dostaneme funkcí parseInt() "10".

Následující řádek animuje vlastnost marginTop. Zde použijeme trojitý operátor pro zjištění, zda-li má marginTop hodnotu menší než nula. Pokud ano, tak vlastnost marginTop daného elementu mění postupně margin až na nulu (tudíž se prvek vysouvá a stává se viditelným), jinak mění margin postupně za zápornou hodnotu, která je uchována v proměnné h.

Nyní je skript hotový k použití.

$(document).ready(function() {
  var $box = $('#box')
    .wrap('
'); $('#blind').click(function() { $box.blindToggle('slow'); }); })

Nejprve je potřeba obalit prvek #box prvkem #box-outer a poté nastavit událost .click() na nějaký prvek a nakonec uvnitř použít námi vytvořenou animaci .blindToggle().

Zdroj: http://www.learningjquery.com/2008/02/simple-effects-plugins

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Tomáš BobekAutor je designérem stránek (2D grafika), ovládá jazyky HTML, CSS, PHP, JavaScript a zajímá se o programování v Javě.Krom programujte.com se podílí na projektech maths.cz (jako redaktor a grafik), ceskewebstudio.cz (jako designér) a webber.cz (jako JavaScript scriptař). Ostatní volný čas rád tráví s přáteli nebo sportuje (tenis, nohejbal, hokejbal, závodně fotbal).
Web     Twitter     Facebook    

Nové články

Obrázek ke článku Jak na push notifikace pro backend vývojáře

Jak na push notifikace pro backend vývojáře

Obě hlavní mobilní platformy, tedy Android i iOS, podporují posílání zpráv z backendu do mobilního zařízení formou push notifikace. V 99% případů se jedná o jedinou správnou cestu, jak aplikaci ze serveru poslat nějaká data - spolehlivé a rychlé push notifikace optimalizované na spotřebu baterie. Tento článek se věnuje pouze službě Firebase Cloud Messaging, která je vlastněná Googlem

Reklama
Reklama
Obrázek ke článku Předvídání extrémních výkyvů počasí v Evropě bude přesnější díky novému počítači Atos BullSequana

Předvídání extrémních výkyvů počasí v Evropě bude přesnější díky novému počítači Atos BullSequana

Předpověď na 15 dní dopředu s přesným rozlišením 10 km dokáže superpočítač zpracovat za méně než hodinu. Společnost Atos, světový lídr v oblasti digitální transformace, dodá Evropskému středisku pro střednědobé předpovědi počasí (ECMWF) nový superpočítač BullSequana XH2000, který je jedním z nejsilnějších meteorologických superpočítačů na světě. 

Obrázek ke článku 18+ věcí, které by měl dobrý iOS vývojář zvládat

18+ věcí, které by měl dobrý iOS vývojář zvládat

Začátky jsou vždy v každém oboru nejtěžší a hodně času zabere se vůbec v tématu zorientovat. Jinak tomu není i pří vývoji na iOS zařízení. Proto jsme vytvořili článek pro ty, kteří své znalosti teprve budují. Tento krátký dokument shrnuje, co potřebuje každý iOSák znát.

Obrázek ke článku V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

Už na konci měsíce může zůstat část Čechů bez televizního signálu. Vypínání stávající sítě začne již 27. listopadu v Praze a středních Čechách a do poloviny roku 2020 čeká přechod na nový standard pozemního digitálního televizního vysílání DVB-T2 celou republiku. K naladění nového televizního vysílání musí řada lidí nakoupit modernější zařízení, upravit antény nebo přejít na kabelové či internetové vysílání. 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý