Příručka pro začátečníky pro práci s animací v jQuery. Provádění vlastních animací

:

jQuery

vlevo: $(".rectangle").width() - $(".rectangle").find(".square-small").width()

Spuštění více animací ve smyčce

Provedení série animací na jednom prvku nebo sadě prvků není o nic obtížnější než vytvoření sekvence (řetězce) volání metody animate(). Přesuneme opět malý čtvereček; bude se pohybovat po obvodu přesýpacích hodin umístěných uvnitř velkého čtverce (nikoli obdélníku). K vytvoření ukázky používáme následující označení:

HTML

Pro .square-small použijeme daný CCS kód z předchozího příkladu. Vnější čtvercový styl:

CSS

.square-big ( šířka: 300px; výška: 300px; zobrazení: blok; pozice: relativní; ohraničení: 1px plná černá; okraj: 20px 0; )

Posledním krokem je napsání kódu JavaScript pro čtyři řádky, které tvoří obvod přesýpacích hodin. Malý čtverec je animován ze své pozice nahoře a vlevo od vnějšího čtverce, dokud nedosáhne pravého dolního rohu velkého čtverce. Pro vytvoření požadovaného efektu se musí malý čtverec posunout diagonálně. Jakmile dosáhne pravého dolního rohu, je třeba jej přesunout do levého dolního rohu, poté do pravého horního rohu a nakonec do výchozí pozice.

Nyní zacyklíme animaci, to znamená, uděláme to tak, že když animace skončí, začne znovu. Abychom to udělali, můžeme zabalit volání 4 funkcí animate() do funkce, která je zase volána uvnitř jiné funkce. To znamená, že vytvoříme funkci, na kterou lze odkazovat. Poté můžeme použít kompletní funkci a po posledním kroku animaci restartovat.

jQuery

(funkce animation() ( var options = ( trvání: 800, náběh: "lineární" ); $(".square-big") .find(".square-small") .animate(( vlevo: 280, nahoře: 280 ), options).animate(( vlevo: 0, ), options).animate(( vlevo: 280, nahoře: 0, ), options).animate(( vlevo: 0, ), $.extend(true, ( ), možnosti, ( kompletní: funkce() ( animace(); ) )));

Všimněte si, že při volání animate() nemusíte zapisovat stejné parametry několikrát, byla použita proměnná options. V posledním kroku navíc přistoupíme k funkci complete() pomocí metody JQuery extend().

Více funkcí zpětného volání

Stejně jako v našem posledním příkladu nastavíme vlastnosti start, complete a progress pomocí parametru options (druhý parametr z druhého formuláře). Cílem je deaktivovat tlačítko, které spouští animaci, když je animace (již) hotová. Druhým úkolem je v procentech ukázat, jaká část z celkové animace byla dokončena. Pro tento příklad použijeme první demo s nezbytnými úpravami, které jsou v něm provedeny.

Aby bylo možné procenta zobrazit, vytvoříme tlačítko a prvek (span). Označení:

HTML

Běh! 0%

Styl se nemění, takže okamžitě přejděme k diskuzi o kódu JavaScript. Aby se animace spustila pouze při kliknutí na tlačítko, vytvoříme handler pro událost kliknutí tlačítka. Uvnitř obslužné rutiny se povolení a zakázání tlačítka provádí pomocí metody jQuery prop() ( prop na jquery.page2page). Metoda je založena na tom, zda animace právě běží nebo již byla spuštěna. Nakonec je použit druhý argument metody progress, což je zase vlastnost objektu options; ukazuje procento (celkového provedení animace). Kód:

jQuery

$("#animation-button").click(function() ( var $button = $(this); $(".rectangle") .find(".square-small") .animate(( vlevo: 280 ) , ( trvání: 2000, start: function() ( $button.prop("disabled", true); ), complete: function() ( $button.prop("disabled", false); ), progress: function( animace, postup) ( $("#procento").text(Math.kolo(pokrok * 100)); ) ));

Závěr

Metoda jQuery animate() byla zkontrolována, byla ukázána její signatura a parametry, které přijímá. Článek uvádí tři příklady použití animace. Schopnosti animate() jsou samozřejmě mnohem širší než ty, které jsou zde diskutovány. Pokud si dáte tu námahu a budete s animací kreativní, výsledky mohou být skutečně působivé. Líbí se mi tento plugin jQuery Audero Smoke Effect, který vytváří kouřový efekt pro jeden nebo více prvků (obvykle obrázky) webové stránky.

Uložte si tuto stránku a otestujte níže uvedené příklady.

Většina funkcí uživatelského rozhraní souvisejících s jQuery je obsažena v knihovně uživatelského rozhraní jQuery, ale základní knihovna obsahuje některé jednoduché efekty a animace. I když jsem je nazval jednoduchými, lze je použít k implementaci poměrně složitých efektů. Tyto nástroje jsou primárně určeny pro animaci viditelnosti prvků, ale lze je také různými způsoby použít k animaci řady vlastností CSS.

Účelem většiny základních efektů je jednoduše zobrazit nebo skrýt prvky. Metody použité k tomuto účelu jsou popsány v tabulce níže:

Metody vytváření základních efektů

Metoda	Popis
skrýt()	Okamžitě skryje všechny prvky obsažené v objektu jQuery
skrýt (trvání), skrýt (trvání, styl)	Postupně skrývá prvky obsažené v objektu jQuery po zadanou dobu s možností určit styl animace
hide(trvání, funkce), hide(trvání, styl, funkce)	Skryje všechny prvky obsažené v objektu jQuery po určenou dobu, s možností určit styl animace a funkci, která se má volat po dokončení efektu.
show()	Okamžitě vykreslí všechny prvky obsažené v objektu jQuery
show(trvání), show(trvání, styl)	Zobrazí všechny prvky obsažené v objektu jQuery po určenou dobu s možností určit styl animace
show(trvání, funkce), show(trvání, styl, funkce)	Zobrazuje všechny prvky obsažené v objektu jQuery po určenou dobu, s možností určit styl animace a funkci, která se má volat po dokončení efektu
přepnout ()	Okamžitě přepne (zobrazí, pokud je skrytý, skryje, pokud je zobrazen) viditelnost prvků obsažených v objektu jQuery
přepnout (trvání), přepnout (trvání, styl)	Přepíná viditelnost prvků obsažených v objektu jQuery po určenou dobu s možností určit styl animace
přepnout (trvání, funkce), přepnout (trvání, styl, funkce)	Přepíná viditelnost prvků obsažených v objektu jQuery po určenou dobu s možností určit styl animace a funkci, která se má volat po dokončení efektu.
toggle(boolean_value)	Provádí jednosměrné přepínání viditelnosti prvků obsažených v objektu jQuery

Příklad použití metod show() A skrýt() bez argumentů pro vytvoření nejjednodušších efektů je uveden níže:

$(funkce() ( $(" SkrýtShow").appendTo("#buttonDiv") .click(function(e) ( if ($(e.target).text() == "Hide") ( $("#row1 div.dcell").hide( ) else ( $("#row1 div.dcell").show(); ) e.preventDefault());

V tomto scénáři jsou pomocí manipulace DOM vytvořena dvě tlačítka (prvky tlačítek) a je poskytnuta funkce, která by měla být vyvolána při kliknutí na kterékoli tlačítko. Tato funkce používá metodu text() k určení, na které tlačítko bylo kliknuto, a v závislosti na tom zavolá buď metodu show() nebo hide().

V obou případech je zadaná funkce volána jako metoda objektu jQuery vytvořeného pomocí selektoru #row1 div.cell. Objekty div patřící do třídy dcell, které jsou potomky prvku s atributem id rovným row1, se tedy stanou neviditelnými nebo viditelnými.

V tomto případě dojde k přechodu prvků z jednoho stavu do druhého okamžitě, bez animace. Nepřichází s žádnými zpožděními nebo efekty a všechny prvky se objeví nebo zmizí okamžitě po kliknutí. Volání hide() u prvků, které již byly zneviditelněny, nebo volání show() u prvků, které již byly zviditelněny, nemá žádný účinek. Nakonec si všimněte, že když skryjete nebo zobrazíte prvek, všichni jeho potomci se také skryjí nebo zobrazí.

Viditelnost spínacího prvku

Slouží k přenosu prvků z viditelného stavu do neviditelného stavu a naopak metoda toggle().. Odpovídající příklad je uveden níže:

$(funkce() ( $(" Přepínač").appendTo("#buttonDiv") .click(function(e) ( $("div.dcell:first-child")).toggle(); e.preventDefault(); )); )); Spustit příklad

V tomto příkladu přidáme do dokumentu jediné tlačítko, které po kliknutí zavolá metodu toggle() a změní viditelnost těch prvků div.dcell, které jsou prvními potomky jejich rodičů.

Všimněte si zhroucení struktury dokumentu kolem skrytých prvků. Pokud chcete prvky skrýt, aby se na stránce objevila oblast, kterou zabírají, nastavte vlastnost CSS viditelnost na skryté.

Jednosměrné přepínání viditelnosti prvku

Předání logické (booleovské) hodnoty metodě toggle() umožňuje zavést omezení na možné směry změn stavu viditelnosti prvků. Předání true jako argumentu pro toggle() zobrazí pouze skryté prvky (ne skryje viditelné prvky). Předání false má opačný účinek: viditelné prvky jsou skryté, ale skryté prvky nejsou viditelné.

Musím se přiznat, že v tomto nástroji nevidím velký přínos a do úvahy jsem jej zařadil pouze pro úplnost prezentace.

Animace viditelnosti prvku

Proces zobrazování a skrývání prvků lze animovat předáním parametru metodě show(), hide() nebo toggle(), který určuje dobu trvání animace. V tomto případě bude proces skrytí nebo zobrazení prvků probíhat hladce po zadanou dobu. Možné možnosti nastavení doby trvání animace jsou uvedeny v tabulce níže:

Příklad animace zobrazení a skrytí prvků je uveden níže. V tomto příkladu pro nastavení doby trvání animovaného přechodu použijeme parametr string fast, kterým udáváme, že pro přepínání viditelnosti img prvků v dokumentu je přiděleno 600 ms:

$(funkce() ( $(" Přepínač").appendTo("#buttonDiv") .click(function(e) ( $("img")).toggle("fast", "linear"); e.preventDefault(); )); )); Spustit příklad

Při zadávání doby trvání animace v milisekundách neuvádějte hodnotu do uvozovek. Například byste měli použít zápis $("img").toggle(500) spíše než $("img").toggle("500"). Pokud jsou přítomny uvozovky, bude zadaná hodnota ignorována a místo ní bude použita interní výchozí hodnota.

Když v tomto skriptu zavoláme metodu toggle(), předáme jí také další argument, nazývaný funkce náběhu/doběhu nebo náběhový/doběhový/doběh, který nastavuje požadovaný styl animace.

Změkčení zde odkazuje na změkčení přechodu animace úpravou jeho rychlosti v průběhu animace. K dispozici jsou dva přednastavené styly změkčení: houpačka A lineární. Styl švihu spustí animaci pomalu, poté ji zrychlí a na konci animace opět zpomalí. Lineární styl odpovídá konstantní rychlosti animace během celého procesu. Pokud je tento argument vynechán, výchozí hodnota je swing.

Použití funkcí zpětného volání v efektech

Metody show(), hide() a toggle() lze předat jako argument funkci, která bude volána po skončení animace. Tuto funkci lze použít k aktualizaci stavu ostatních prvků tak, aby odrážely změny v jejich stavu, jak ukazuje příklad níže:

Přeměna").insertAfter("tlačítko #buttonDiv") .click(function(e) ( hideVisibleElement(); e.preventDefault(); )); function hideVisibleElement() ( $(visibleRow).hide("fast", showHiddenElement) ; ) funkce showHiddenElement() ( $(hiddenRow).show("fast", switchRowVariables); ) funkce switchRowVariables() ( var temp = hiddenRow; hiddenRow = visibleRow; visibleRow = temp; ));

Aby byl tento příklad jasnější, funkce efektu byla rozdělena mezi několik samostatných funkcí. Nejprve skryjeme jeden z prvků div, který slouží jako řádek tabulky prvků v rozvržení stránky ve stylu CSS, a definujeme dvě proměnné pro sledování, který řádek je viditelný a který řádek je neviditelný.

Dále se do dokumentu přidá tlačítko (prvek tlačítka), na které se po kliknutí zavolá funkce hideVisibleElement(), která pomocí metody hide() animuje skrytí viditelné řady prvků. V tomto případě uvedeme název funkce, která má být volána po dokončení efektu, v tomto případě showHiddenElement.

Tato funkce používá metodu show() k animaci obnovení viditelnosti prvků. Opět zde specifikujeme funkci, která by měla být volána po dokončení efektu. V tomto případě se jedná o funkci switchRowVariables(), která sleduje viditelnost prvků, což vám umožní při příštím kliknutí na tlačítko aplikovat animaci na požadované prvky.

Nyní se po kliknutí na tlačítko zobrazí místo aktuálního řádku skrytý řádek a animace se provede rychle, aby zdlouhavý přechod stránky z jednoho stavu do druhého uživatele nedráždil.

Proces přechodu je plynulý a nedochází k žádné interferenci z rozložení tabulky CSS, protože nejsou ovlivněny jednotlivé buňky, ale řádky tabulky jako celku. Obvykle není potřeba rozdělovat efekt do samostatných funkcí, jak bylo provedeno v tomto příkladu. Níže uvedený příklad ukazuje stejný příklad převedený do kompaktnější podoby pomocí sady vestavěných funkcí:

$(function() ( var hiddenRow = "#row2"; var visibleRow = "#row1"; $(hiddenRow).hide(); $(" Přeměna").insertAfter("#buttonDiv button") .click(function(e) ( $(visibleRow).hide("fast", function() ( $(hiddenRow).show("fast", function()) ( var temp = hiddenRow;

Efekty plynulých změn výšky prvků

Knihovna jQuery má řadu metod určených k vytváření efektů pro prvky, které se plynule roztahují a sbalují změnou jejich výšky (tzv. posuvné efekty). Tyto metody jsou uvedeny v tabulce níže:

Tyto metody animují vertikální rozměry prvků. Berou stejné argumenty jako metody základních efektů. Můžete jim předat dobu trvání efektu, styl změkčení a funkci zpětného volání jako argumenty a vybrat si možnost volání, která vám vyhovuje. Odpovídající příklad je uveden v příkladu níže:

$(funkce() ( $(" Sbalit rozbalit").insertAfter("tlačítko #buttonDiv") .click(function(e) ( $("h1")).slideToggle("fast"); e.preventDefault(); )); )); Spustit příklad

V tomto příkladu metoda slideToggle() používá se k vytvoření efektu vyblednutí prvku h1 změnou jeho výšky.

Efekty plynulých změn v průhlednosti prvků

Tato část popisuje techniky pro vytváření efektů rozpuštění prvků, které se používají k zobrazení a skrytí prvků změnou jejich krytí (nebo, chcete-li, změnou jejich průhlednosti). Tyto metody jsou uvedeny v tabulce níže:

Metody vytváření rozpouštěcích efektů

Metoda	Popis
fadeOut(), fadeOut (trvání), fadeOut (trvání, funkce), fadeOut (trvání, styl, funkce)	Skryje prvky snížením jejich neprůhlednosti
fadeIn(), fadeIn(trvání), fadeIn(trvání, funkce), fadeIn(trvání, styl, funkce)	Zobrazte prvky zvýšením jejich krytí
fadeTo (trvání, neprůhlednost), fadeTo (trvání, neprůhlednost, styl, funkce)	Změní krytí na zadanou úroveň
fadeToggle(), fadeToggle(trvání), fadeToggle(trvání, funkce), fadeToggle(trvání, styl, funkce)	Střídavě zobrazujte a schovávejte prvky pomocí neprůhlednosti

Množiny parametrů používaných v metodách fadeIn(), fadeOut() A fadeToggle(), jsou podobné sadám parametrů používaným v jiných metodách, které vytvářejí efekty. Když jsou tyto metody volány, mohou jim být předány parametry, jako je trvání animace, styl animace a funkce zpětného volání, jak bylo ukázáno v předchozích příkladech.

Níže je uveden příklad použití efektů průhlednosti:

$(funkce() ( $(" Přepínač").insertAfter("tlačítko #buttonDiv") .click(function(e) ( $("img")).fadeToggle(); e.preventDefault(); )); )); Spustit příklad

Metoda fadeToggle() je zde částečně aplikována na prvky img, aby se demonstrovala omezení tohoto efektu. Na rozdíl od jiných efektů, které také mění velikost vybraných prvků, efekt průhlednosti ovlivňuje pouze nastavení krytí. To znamená, že metody fade() poskytují plynulou animaci pouze do té doby, než jsou prvky zcela průhledné, v tomto okamžiku je jQuery skryje a rozvržení stránky se náhle změní. V některých situacích může toto chování stránky dráždit uživatele.

Oživte průhlednost na určitou hodnotu

Chcete-li vytvořit animaci, která se zastaví, když krytí dosáhne určité hodnoty, použijte fadeTo(). Parametr opacity může nabývat hodnot od 0 (zcela průhledné) do 1 (zcela neprůhledné). V tomto případě se vlastnost viditelnosti prvků nezmění, což zabrání náhlé změně rozvržení stránky popsané výše.

Příklad použití metody fadeTo() je uveden níže:

$(funkce() ( $(" Rozpustit obrázky").insertAfter("tlačítko #buttonDiv") .click(function(e) ( $("img")).fadeTo("fast", 0); e.preventDefault(); )); )); Spustit příklad

V tomto příkladu jsme specifikovali, že neprůhlednost prvků by se měla snižovat, dokud nebudou zcela průhledné. Efekt vytvořený v tomto případě je stejný jako při použití metody fadeOut(), ale prvky nejsou po dokončení přechodu animace skryté.

Není nutné snižovat krytí na nulu. Pro tento parametr můžete zadat jakoukoli jinou hodnotu v povoleném rozsahu (0 - 1).

V tomto článku se budeme zabývat základy animace jQuery, abyste ji mohli použít k návrhu složitých stránek. Animace je základní funkcí prvků interaktivního designu webu.

Design webových stránek hraje hlavní roli v neustálém získávání návštěvníků. Interaktivní design přitahuje více pozornosti ve srovnání s běžným statickým designem.

Technologie se zdokonaluje rychlým tempem, aby vyhovovala potřebám moderního webdesignu. Výsledkem je, že CSS3 nabízí implementaci animace bez pomoci JavaScriptu. Přestože se CSS3 a HTML5 neustále zlepšují, jQuery zůstává populární metodou pro vytváření interaktivního designu.

Začněme!

Praktické využití animace v jQuery

jQuery se široce používá k vývoji interaktivních prvků, jako jsou posuvníky, nabídky, posuvníky a další. Než se pustíme do samotné animace, doporučuji vám podívat se na následující praktické implementace, které ilustrují sílu animace v jQuery.

• Boční posuv při rolování;
• Sloučení obrazových rámců s jQuery;
• Animace "Noční sny";
• Animace otvoru opony pomocí jQuery;
• Vytvoření posuvné navigační nabídky pomocí jQuery.

Jako začátečník nebudete schopni okamžitě zopakovat to, co je uvedeno v těchto příkladech. Příště se proto podíváme na základy animace v jQuery z pohledu začátečníků.

Stáhněte si zdrojové kódy Demonstrace

Úvod do základů animace jQuery

Většina návrhářů má základní znalosti o práci s kódem jQuery nebo JavaScript. Změna viditelnosti prvku je běžným úkolem, který se vyskytuje téměř na všech webových stránkách.

Prvek můžeme jednoduše skrýt/zobrazit pomocí atributů CSS zobrazení nebo viditelnost. jQuery zjednodušuje proces zavedením dvou funkcí, skrýt a zobrazit. Zvažte následující kód pro zobrazení a skrytí prvku HTML.

$("#panel").show(); $("#panel").hide();

Pomocí výše uvedeného kódu se prvek okamžitě objeví a zmizí. Když navštívíte následující odkaz, můžete si prohlédnout ukázku tohoto příkladu: http://jsfiddle.net/nimeshrmr/bMmFS/

V ideálním případě chceme vyhladit proces skrývání a zobrazování prvků pomocí animace, abychom zlepšili uživatelský dojem. jQuery poskytuje dvě vestavěné metody pro zobrazení a skrytí prvků pomocí jednoduchých animací.

• Dissolve – implementuje proces postupného rozpouštění HTML elementu změnou jeho vlastnosti opacity;
• Sliding – implementuje postupné roztahování/stahování HTML elementu změnou jeho výšky.

Podívejme se, jak tyto techniky použít k zobrazení a skrytí prvků s animovaným efektem.
jQuery zapouzdřuje složitost animace tím, že poskytuje vestavěné metody pro řešení různých problémů s webovým designem.

Rozpuštění

Rozpouštění se obvykle realizuje pomocí funkcí fadeIn a fadeOut. Vlastnost krytí prvku je zvýšena funkcí fadeIn a snížena funkcí fadeOut. Můžeme také projít časovým intervalem rozpouštění, jak ukazuje následující příklad:

$("#panel").fadeIn("pomaly"); $("#panel").fadeOut("rychle");

Jako časový interval máme možnost zvolit předdefinované hodnoty pomalé a rychlé. Můžeme také zadat několik milisekund, abychom určili dobu trvání animace. Zde je odkaz demonstrující tento příklad:
http://jsfiddle.net/nimeshrmr/zcRzL/

Uklouznout

Posuvné funkce mění výšku prvku místo jeho průhlednosti, aby se dosáhlo efektu animace. Funkce mají podobnou syntaxi a fungují podobným způsobem jako funkce rozpuštění.

V tomto případě se slideUp používá ke skrytí a slideDown k zobrazení prvků. Následující kód ukazuje základní způsob použití posuvných funkcí:

$("#panel").slideDown("pomaly"); $("#panel").slideUp("rychle");

Parametr trvání také funguje podobně jako funkce rozpuštění. Ukázka použití posuvných funkcí je k dispozici na následujícím odkazu:
http://jsfiddle.net/nimeshrmr/nDz6J/

Začínáme s funkcí jQuery Animate

Většina začátečníků si myslí, že vývoj animace je docela obtížný úkol. Určitě je to těžké, pokud začínáte od nuly. jQuery zapouzdřuje veškerou složitost tím, že poskytuje jedinou funkci, která ovládá všechny typy animací.

Obecně se animace vytváří změnou hodnot atributů CSS. Jakmile se seznámíte s funkcí animace jQuery, bude vytváření složitých animací hračkou. Začněme tím, že se podíváme na šablonu funkce animace:

$("#panel").animate(( // CSS vlastnosti a hodnoty), 5000, "linear", function() ( // Ošetření dokončení animace ));

Tento kód ilustruje vzor pro použití funkce animace. První parametr obsahuje všechny vlastnosti a hodnoty CSS.

Další volitelný parametr určuje dobu trvání animace. Třetí parametr definuje, jak bude animace roztažena (typ animace), a poslední parametr definuje anonymní funkci, která se má zavolat, když animace skončí.

Když se podíváme na vzor použití, můžeme přejít k vytvoření něčeho praktického pomocí animace jQuery.

Animace částí obrázku

V této části se podíváme na to, jak můžete zobrazit obrázek použitím animace na jeho jednotlivé části. Nejprve musíme obrázek rozdělit na několik malých. Můžete použít techniku ​​dělení obrazu uvedenou v tomto článku: " Vytvoření puzzle pomocí jQuery a PHP».

Zde je obrázek, který použijeme pro animaci:

Ve zdrojových kódech k tomuto článku najdete 12 obrázků získaných po oddělení. Každý obrázek bude mít 150 x 150 pixelů. Jsou rozděleny do dvou řad po 6 kusech. Všech 6 obrázků každého řádku bude umístěno v pravém rohu stránky pomocí následujícího kódu:

Zde je 12 obrázků uspořádaných do dvou řad pomocí dvou CSS tříd img_item a img_item2. Nyní se podívejme na kód CSS pro umístění obrázků:

Img_item( pozice: absolutní; vpravo: 0px; neprůhlednost:0; nahoře:0; ) .img_item2( pozice: absolutní; vpravo: 0px; neprůhlednost:0; nahoře:150px; )

Podle výše uvedeného kódu budou všechny obrázky v každém řádku skryty a umístěny na sebe pomocí absolutního umístění. Nyní se můžeme podívat na kód jQuery pro generování obrázku pomocí animace:

$(document).ready(function())( var left = 0; $(".img_item").each(function(i,val)( $(this).animate(( left: left, opacity: 1 ) , 1500 += 150 )); += 150));

Máme tedy dva selektory pro výběr prvků tříd img_item a img_item2. Poté aplikujeme funkci animace na jednotlivé prvky, abychom plynule změnili hodnotu vlastnosti neprůhlednost o 1 a vlastnost left se změní vzhledem k poloze předchozí části obrázku. V podstatě bude animace aplikována na všechny části obrázku najednou, výsledkem je něco takového:

Podobné efekty můžeme použít uvnitř posuvníků, spořičů obrazovky a galerií obrázků. Zde je ukázka předchozího příkladu.

Nyní znáte základy práce s funkcí animace. Podívejme se hlouběji na aspekty animace, zejména na podrobnější nastavení.

Vývoj sekvence efektů

V předchozím příkladu byla animace aplikována na všechny prvky ihned po načtení stránky. Někdy ale potřebujeme efekty aplikovat postupně, kdy animace každého prvku začíná po dokončení animace předchozího prvku. Zkusme tedy načíst stejný obrázek pomocí sekvence efektů. Začněme HTML kódem:

Jediný rozdíl oproti předchozí verzi je použití jedné CSS třídy místo dvou tříd pro řádky. Tato implementace bude generovat řádky pomocí kódu jQuery namísto jejich pevného kódování pomocí tříd CSS.

Kód CSS pro implementaci tohoto příkladu bude stejný jako v předchozím příkladu. Nyní se podívejme na kód jQuery, abychom vytvořili sekvenci efektů:

$(document).ready(function())( var left = 0; var items = $(".img_item"); animateImg(items,0,0,0); ));

Po načtení stránky vybereme všechny prvky obrázku pomocí třídy img_item. Tyto prvky pak předáme funkci animateImg k vytvoření animace. Následující kód ukazuje implementaci funkce animateImg:

var indexNum = 1;

var animateImg = function(items,left,height,indexNum)( if(items.length >= indexNum)( var item = items.get(indexNum); $(item).animate(( vlevo: vlevo, nahoře: výška, neprůhlednost: 1 ), 1500 ,function() ( vlevo += 150; indexNum++; if(indexNum % 6 == 0)( vlevo = 0; výška += 150; ) animateImg(items,left,height,indexNum); ) );

Funkce animateImg má čtyři parametry. První parametr určuje kolekci prvků obrázku. Druhý a třetí parametr definují hodnoty vlastností vlevo a nahoře pro umístění na obrazovce.

Zpočátku jsou tyto dvě hodnoty nastaveny na 0, aby byl obraz umístěn v levém horním rohu obrazovky. Čtvrtým parametrem je sériové číslo obrázku pro jejich rozdělení do řádků.

Nejprve zkontrolujeme, zda jsme dosáhli konce pole prvků pomocí podmínky if. Poté vybereme obrázek z pole podle daného sériového čísla.

V tomto příkladu máme dva řádky po 6 snímcích. Použijeme tedy dělení modulo ke kontrole, zda jsme dosáhli konce řádku. V tomto případě zvýšíme hodnotu top pro další obrázek, abychom dynamicky vytvořili řádky.

Nakonec rekurzivně zavoláme funkci animateImg, abychom iterovali všechny prvky a vygenerovali kompletní obrázek. Následující obrázek ukazuje sekvenci efektů v akci.

Zde najdete ukázku předchozího příkladu.

Jak vidíte, k animaci dalšího prvku jsme použili funkci dokončení funkce animace. Každá fáze animace tedy začíná po dokončení té předchozí. Podobné funkčnosti můžeme dosáhnout pomocí fronty funkcí animace.

Efektové řetězce

Doposud jsme pro každý prvek vytvořili jeden efekt. Ve složitějších úlohách budeme muset propojit několik efektů pro každý prvek v řetězci. Upravme tedy předchozí příklad přidáním řetězců efektů.

K animaci dochází díky plynulým změnám vlastností CSS prvků. Funkce má dvě použití:

vlastnosti
trvání— trvání animace. Lze zadat v milisekundách nebo jako hodnotu řetězce „fast“ nebo „slow“ (200 a 600 milisekund).
uvolnění— změnit rychlost animace (zda se bude ke konci provádění zpomalovat nebo naopak zrychlovat). (viz popis níže)
zpětné volání— funkce, která bude volána po dokončení animace.

vlastnosti— seznam vlastností CSS zapojených do animace a jejich konečných hodnot. (viz popis níže)
možnosti- další možnosti. Musí být reprezentován objektem ve formátu option:value. Možnosti volby:

trvání— trvání animace (viz výše). uvolnění— změnit rychlost animace (zda se bude ke konci provádění zpomalovat nebo naopak zrychlovat). (viz popis níže) kompletní— funkce, která bude volána po dokončení animace. krok— funkce, která bude volána po každém kroku animace. fronta- Booleovská hodnota udávající, zda má být aktuální animace umístěna do fronty funkcí. Pokud je false , animace se spustí okamžitě bez řazení do fronty. specialEasing— umožňuje nastavit různé hodnoty náběhu/doběhu pro různé parametry CSS. Určeno objektem ve formátu parametr:hodnota. Tato možnost byla přidána v jQuery 1.4.

Provádění více animací

Když je vyvoláno několik efektů současně ve vztahu k jednomu prvku, jejich provedení nenastane současně, ale jeden po druhém. Například při spuštění následujících příkazů:

$("#my-div" ) .animate (( výška: "skrýt" ) , 1000 ) ;

$("#my-div" ) .animate (( height: "show" ) , 1000 ) ; prvek s id můj-div

, zpočátku plynule zmizí z obrazovky a poté se začne plynule znovu objevovat. Animace nastavené na různých prvcích však budou spuštěny současně:

$("#my-div-1") .animate (( výška: "skrýt" ) , 1000 ) ;

$("#my-div-2") .animate (( height: "show" ) , 1000 ) ;

parametr vlastnosti

Nastaveno objektem ve formátu css-property:value. Je to velmi podobné zadání skupiny parametrů v metodě .css(), vlastnosti však mají širší rozsah typů hodnot. Lze je specifikovat nejen ve formě známých jednotek: čísla, pixely, procenta atd., ale také relativně: (výška:"+=30", vlevo:"-=40") (zvýší výšku o 30 pixelů a posun doprava o 40). Kromě toho můžete nastavit hodnoty "hide", "show", "toggle", které skryjí, zobrazí nebo zvrátijí viditelnost prvku v důsledku parametru, na který jsou aplikovány. Například

$("div" ) .animate ( ( opacity: "hide" , height: "hide" ) , 5000 ) ; Skryje prvky div snížením průhlednosti a zmenšením výšky (sbalení) prvku.

Poznámka 1: Všimněte si, že v parametru vlastnosti můžete zadat pouze ty vlastnosti CSS, které jsou určeny pomocí číselných hodnot. Neměla by se například používat vlastnost background-color.

Poznámka 2

: Hodnoty zapsané v css pomocí pomlčky musí být zadány bez pomlčky (nikoli margin-left, ale marginLeft).

Obsluha dokončení animace

Funkce zadaná jako obslužná rutina dokončení animace nepřijímá parametry, ale uvnitř funkce bude proměnná this obsahovat objekt DOM prvku, který je animován. Pokud existuje několik takových prvků, bude handler volán samostatně pro každý prvek.

Při provádění jedné animace je možné nastavit různé hodnoty náběhu/doběhu pro různé vlastnosti CSS. K tomu je potřeba použít druhou možnost funkce animate() a nastavit volbu specialEasing. Například:

$("#clickme" ) .click (function () ( $("#book" ) .animate (( neprůhlednost: "přepnout" , výška: "přepnout" ) , ( trvání: 5000 , specialEasing: ( neprůhlednost: "lineární " , výška: "houpačka" ) ) ) ;) );

v tomto případě bude změna průhlednosti probíhat rovnoměrně (lineární) a výška se bude měnit se zrychlením na začátku a mírným zpomalením na konci (houpání).

V akci

Po kliknutí na tlačítko provedeme některé manipulace s prvkem pomocí metody animace:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~style~gt~ div (barva pozadí:#bca; šířka:100px; okraj:1px plná zelená; ) ~lt~/style~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~ ~lt~/head~ gt~ ~lt~body~gt~ ~lt~button id="go"~gt~" Jezte koláč~lt~/button~gt~ ~lt~div id="block"~gt~Alice~lt~/ div ~gt~ ~lt~script~gt~ // Změňme několik hodnot css ​​během jedné animace.

$("#go").click(function())( $("#block").animate(( šířka: "70%", // šířka bude 70% neprůhlednost: 0,4, // průhlednost bude 40 % marginLeft: "0.6in", // odsazení od levého okraje prvku bude rovné 6 palcům fontSize: "3em", // velikost písma se zvětší 3krát borderWidth: "10px" // tloušťka ohraničení bude 10 pixelů), 1500 se objeví po dobu 1,5 sekundy));

~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

• Odkazy
• Vyhledávací klávesy:
• vlastní animace
• provádění animace
• uživatelsky definovaná animace
• uživatelem definované efekty