Obsah
Animované efekty v jQuery Nejsou to animace, které známe, to znamená, že kresbě nedáme pohyb, je důležité to objasnit, protože to může vést ke zmatku. Tyto animované efekty odkazují na způsob, jakým jsou generovány přechody prvků v SLUNCEprvek, který se může pomalu pohybovat z rohu prohlížeče nebo zmizet a rozbít se na tisíce kousků.Na první pohled se může zdát, že jsou pro nás užitečné, nakonec, pokud chceme, aby se prvek objevil nebo zmizel, nemusí nám být jedno, jak se to stane, nicméně pro ty, kteří studují chování uživatelská rozhraní To je velmi důležité, protože to může nastavit náladu uživatele nebo být zobrazeno jako jemný způsob, jak udělat vizuál o něco přitažlivější.
Existují samozřejmě tací, kteří zneužívají a zveličují používání animovaných efektů a přetěžují rozhraní natolik, že se stává těžkým nebo nespolehlivým a nutí uživatele při používání systému trpět, proto je nutné mít minimum svědomí a umírněnost při aplikaci těchto typů efektů.
Je důležité vědět, že se liší typy animací Mají řadu kontrolovatelných možností z hovoru, který provádíme, můžeme ovládat jeho trvání, abychom mohli kalibrovat, zda účinek ovlivňuje použitelnost nebo ne, a pokud v závislosti na době, kterou trvá, může být podrobný a dosáhnout požadovaného efektu a my může také indikovat funkci nebo metodu, která má být provedena v zpětné volání na konci animace, například pokud necháme tlačítko zmizet, když už tam není, provede se metoda, která poté pošle uživateli zprávu.
Další možností, kterou máme, je předat a objektová mapa ve kterém definujeme pokročilé nebo exkluzivní možnosti animovaného efektu, který používáme, ale to je nejvíce ze všeho, když chceme dělat něco velmi konkrétního a pokročilého. Syntaxe pro použití těchto možností je následující:
$ (volič). efekt (doba trvání); $ (selector) .effect (doba trvání, funkce CallBack); $ (selector) .effect (functionCallBack); $ (selector) .effect (mapObjects);
Jak vidíme, každý řádek odpovídá každé z možných variací, které můžeme použít ve standardních animacích, je možné, že některé animace mají určitou charakteristiku, ale v těch, které uvidíme v tomto tutoriálu, s tím budeme pracovat.
Jedním z nejpoužívanějších a nejužitečnějších efektů, na který můžeme myslet, je zobrazování a skrývání prvků a také se ukazuje, že jde o celkem jednoduché efekty k implementaci, proto je použijeme jako příklad.
zobrazit () a skrýt ()Metody, které nám umožňují dosáhnout těchto cílů, jsou Ukázat() Y skrýt (), protože vidíme, že jejich jména v angličtině odpovídají akci, u první ukázky a u druhé se schovat, lze je použít na jakýkoli prvek v našem SLUNCE, takže jsou docela praktické a užitečné.
Uděláme malou animaci, ve které použijeme trvání a volání funkce zpětné volání v době jeho provádění použijeme efekty Ukázat() Y skrýt () a tak se můžeme naučit, jak se používají.
V následujícím kódu vidíme, jak v první řadě zahrneme knihovnu jQuery od jednoho z CDN adekvátní, díky tomu se vyhneme tomu, abychom ho museli ukládat lokálně, a proto využijeme výhody mezipaměti prohlížeče.
Poté definujeme dva bloky pojmenovaný položka 1 Y prvek 2 respektive kde je první skrytý a druhý viditelný a nakonec máme tlačítko, které říká začátek, na které použijeme jeho událost kliknutí, která provede funkci podporovat().
Funkce podporovat() nejprve použijte animaci Ukázat() do položka 1 a dává mu hodnotu 1 000 milisekund, což se rovná 1 sekundě, a k tomu přidáme a zpětné volání kde aplikujeme efekt skrýt () naše prvek 2 a generuje zprávu na konzolu.
Uvnitř animace skrýt () na co se vztahujeme prvek 2 vytvořili jsme a zpětné volání kde také napíšeme zprávu pomocí konzoly. Podívejme se tedy na kód pro náš první příklad:
AnimaceToto je náš počáteční skrytý prvek
Animaci spustíte kliknutím na tlačítko
Start
Podívejme se nyní, jak to vypadá v našem prohlížeči, na dalším obrázku uvidíme HTML Před provedením jakékoli akce se podívejme na to, jak položka 1 nezobrazeno:
Jsou chvíle, kdy chceme, aby tlačítko fungovalo jako přepínač, zobrazující a skrývající prvek nebo skupinu prvků, ačkoli to lze snadno provést vyhodnocením stavů a použitím metod Ukázat() Y skrýt (), pravdou je, že bychom generovali příliš mnoho kódu pro něco tak jednoduchého, proto tým jQuery přemýšleli o tom a poskytli nám tuto metodu toggle ().
Co dělá metoda toggle ()?Tato metoda vyhodnotí aktuální stav prvku, a pokud je tedy viditelný, skryje jej a pokud je skrytý, zobrazí jej, jak ukazuje chování typu přepínače. Nejlepší je, že k této metodě můžeme přidat různé možnosti animace s délkou trvání a možností provedení zpětné volání.
Pojďme nyní vytvořit příklad, ve kterém uvedeme do praxe to, co jsme se dozvěděli o metodě toggle (), podívejme se na níže uvedený kód:
AnimaceVýsledek spuštění efektu toggle ().
Start
V následujícím kódu uvidíme, jak jsme vytvořili div s názvem položka 1 který je zpočátku skrytý, pak máme tlačítko Start který při kliknutí vyvolá funkci animace, bude mít metodu přepnout () aplikován na prvek a v první instanci se zobrazí a zobrazí zprávu pro každou konzolu.
Podívejme se na počáteční stav tohoto kódu prohlížečem, všimneme si, že máme pouze tlačítko a v konzole není nic:
Podívejme se v následujícím seznamu na jeho ekvivalenty Ukázat() a do skrýt ():
fadeIn () a slideIn ()Odpovídají účinkům zobrazování prvků, to znamená, že jsou ekvivalentní Ukázat().
fadeOut a slideOut ()Odpovídají účinkům na skrytí prvků, to znamená, že jsou ekvivalentní skrýt ().
fadeToggle () a slideToggle ()Existuje třetí případ a je to ten, který odpovídá efektům typu přepínače a jsou jim ekvivalentní toggle ().
Jako cvičení vám umožníme znovu projít příklady, ale pomocí těchto nových metod, abyste mohli z první ruky vidět, jak fungují.
S tímto dokončujeme tento tutoriál, naučili jsme se animovat naše prvky jemným a inteligentním způsobem, je důležité tyto efekty nezneužívat při umísťování velmi dlouhých časů animace, protože čeho dosáhneme, bude obtěžovat uživatele a zdržet jejich práci, pamatovat si, že musíme udržovat použitelnost nade vše.
