Skapa animation Java script föreläsning. Skapa animation i JavaScript. Komplexa stegalternativ

Hallå! I den här handledningen kommer vi att titta på animationer i JavaScript. JavaScript-animering används där det inte är lämpligt.

Till exempel animering längs en komplex bana, med en speciell tidsfunktion som går bortom Bezier-kurvor, på duk. Den används även för animering i äldre IE. Även om det måste sägas att för att spara resurser, särskilt på mobila enheter, är det att föredra att använda CSS-animationer.

setInterval funktion

Låt oss först definiera animation. Så ur HTML/CSS-synpunkt är animering en gradvis förändring av stilen för ett DOM-element. Om du till exempel ökar style.left-koordinaten från 0px till 100px flyttas elementet åt vänster.

Om du ökar den vänstra egenskapen från 0 till 100 med metoden och gör 50 ändringar per sekund, kommer det att se ut som en jämn rörelse. Samma princip som i filmbranschen: 24 eller fler setInterval-samtal per sekund räcker för animering.

Animationskoden ser ut så här:

Var fps = 50; // 50 bilder per sekund var timer = setInterval(function() (if (time up) clearInterval(timer); annars öka vänster lite), 1000 / fps)

Här är ett mer komplett exempel på animationskoden:

Var start = Date.now(); // spara starttiden var timer = setInterval(function() ( // beräkna hur mycket tid som har gått sedan starten av animeringen var timePass = Date.now() - start; if (timePassed >= 2000) ( clearInterval( timer); // slut efter 2 sekunder return ) // ritar animationsstatusen som motsvarar tiden timePass draw(timePassed), 20); // medan timePassed går från 0 till 2000 // vänster tar värden från 0 till 400px funktion draw(timePass) ( train.style.left = timePass / 5 + "px"; )

requestAnimationFrame

Om du har mer än en sådan setInterval, men flera på olika ställen i koden, måste webbläsaren arbeta med sidan mer än en gång under samma 20 ms. Men förutom setInterval finns det andra åtgärder, till exempel att rulla en sida, som också måste ritas.

Om alla omritningsåtgärder utförs oberoende, kommer mycket dubbelarbete att utföras.

Det är mycket bättre ur prestationssynpunkt att gruppera alla omritningar till en och köra dem centralt, alla tillsammans.

För detta har JavaScript-ramverk som stöder animering en enda timer:

SetInterval(function() ( /* rita alla animationer */ ), 20);

Alla animationer som ett sådant ramverk lanserar läggs till i den globala gemensamma listan, och en gång var 20:e ms kontrollerar en enstaka timer den, startar aktuella och tar bort färdiga.
Moderna webbläsare, förutom IE9-, stöder Animation timing-standarden, vilket representerar ett ytterligare steg i denna riktning. Det låter dig synkronisera alla animationer med de inbyggda siduppdateringsmekanismerna. Det vill säga att inte bara våra animationer, utan även CSS-animationer och andra webbläsarritningar kommer att grupperas.

I det här fallet kommer grafikacceleratorn att användas så effektivt som möjligt, och upprepad bearbetning av samma delar av sidan kommer att elimineras. Detta innebär att CPU-belastningen blir mindre och själva animeringen blir smidigare.

Funktionen requestAnimationFrame används för detta.

Funktionssyntax:

Var requestId = requestAnimationFrame(återuppringning)

Ett sådant samtal schemalägger återuppringningsfunktionen att köras inom en snar framtid, när webbläsaren bedömer att det är möjligt att utföra animeringen.
Om du schemalägger någon form av ritning i återuppringningen, kommer den att grupperas med andra requestAnimationFrames och med webbläsarens interna ritningar.
Returvärdet i requestId behövs för att avbryta lanseringen:

// avbryt körningen som schemalagts ovan callback cancelAnimationFrame(requestId);

Återuppringningsfunktionen får ett argument - den tid som har gått sedan sidan började laddas, resultatet av anropet performance.now().

Som regel lanseras återuppringningen mycket snart. Om processorn har en tung belastning eller den bärbara datorns batteri är nästan tomt, så mer sällan.

Om du kör den här koden kommer du att se luckor mellan de första 20 körningarna av requestAnimationFrame. Som regel är detta 10-20 ms, men det kan vara mer eller mindre. Detta är den optimala animeringsfrekvensen ur webbläsarens synvinkel.

var prev = performance.now(); var gånger = 0; requestAnimationFrame(funktion mått(tid) ( document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " "); prev = time; if (times++< 10) requestAnimationFrame(measure); })

Animationsfunktion baserad på requestAnimationFrame:

// Ritningsfunktionen drar // Varaktighet för animeringens varaktighet funktionen animate(draw, duration) ( var start = performance.now(); requestAnimationFrame(funktion animate(tid) ( // bestäm hur mycket tid som har gått sedan starten av animationen var timePassed = tid - start; // det kan finnas ett litet överskott av tid, i det här fallet, fixa slutet om (timePassed > duration) timePassed = varaktighet // rita animationens tillstånd vid ögonblicket timePassed draw(timePassed ); // om animeringstiden inte har tagit slut, schemalägg en annan bildruta if ( timePassed< duration) { requestAnimationFrame(animate); } }); }

Animationsstruktur

Baserat på requestAnimationFrame kan du bygga en mycket kraftfullare, men samtidigt enkel animationsfunktion.

Animation har tre huvudparametrar:

Varaktighet Den totala tiden som animeringen varar, i ms. Till exempel, 1000. timing(timeFraction) En tidsfunktion som, i likhet med , beräknar tillståndet för animeringen baserat på den aktuella tiden.

Den får som indata ett kontinuerligt ökande antal timeFraction - från 0 till 1, där 0 betyder början av animationen och 1 betyder slutet.

Resultatet bör vara animeringens slutförande värde, vilket motsvarar y-koordinaten i CSS-övergångar på Bezier-kurvor.

Dessutom, i analogi med övergångstidsfunktion, måste följande villkor vara uppfyllda:

• timing(0) = 0
• timing(1) = 1...Det vill säga, animeringen börjar vid punkt (0,0) - noll tid och noll framsteg och slutar vid (1, 1) - full tid har passerat och processen är klar. en rak funktion betyder enhetlig utvecklingsprocess: funktion linjär(timeFraction) (retur timeFraction;)

• Hennes schema:

• Som du kan se sammanfaller dess graf helt med övergångstidsfunktion: linjär, och effekten är absolut densamma. Det finns andra, mer intressanta alternativ, vi kommer att överväga dem ytterligare.

draw(progress) En funktion som tar emot animeringens slutförandestatus och ritar den. Värdet progress=0 motsvarar startpunkten för animeringen, progress=1 – slutpunkten.

Det är denna funktion som faktiskt utför animeringen.

Den kan till exempel flytta ett element:

Funktion draw(progress) ( train.style.left = progress + "px"; ) I princip är alla alternativ möjliga, du kan animera vad som helst och hur du vill.

Tillfälliga funktioner

Ovan såg vi den enklaste linjära tidsfunktionen.

Låt oss titta på exempel på rörelseanimering med olika timing.

Till makten n

Här är ett annat enkelt fall - gå vidare till makten n. Specialfall – kvadratiska, kubiska funktioner, etc.

För en kvadratisk funktion:

Funktion quad(progress) ( return Math.pow(progress, 2) )

Graf över en kvadratisk funktion:

Att öka graden påverkar accelerationen. Till exempel, grafen för den 5:e graden:

Fungera:

Funktion circ(timeFraction) ( return 1 - Math.sin(Math.acos(timeFraction)) )

Schema:

Baksida: skjut med pilbåge

Denna funktion fungerar enligt principen om en båge: först "drar vi i snöret" och sedan "skjuter".

Till skillnad från tidigare funktioner beror denna på en extra parameter x, som är "elasticitetskoefficienten". Det bestämmer avståndet till vilket bågsträngen "dras tillbaka".

Funktion back(x, timeFraction) ( return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x) )

Graf för x = 1,5:

studsa

Föreställ dig att du släpper en boll, den faller i golvet, studsar flera gånger och stannar.

Bounce-funktionen gör samma sak, bara omvänt: "studsningen" börjar omedelbart.

Denna funktion är lite mer komplex än de tidigare och använder koefficienter:

Funktion bounce(timeFraction) ( för (var a = 0, b = 1, resultat; 1; a += b, b /= 2) ( if (timeFraction >= (7 - 4 * a) / 11) ( return - Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2) ) )

Elastisk animation

Denna funktion är beroende av en extra parameter x, som anger startintervallet.

Funktion elastisk(x, timeFraction) ( return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction) )

Graf för x=1,5:

Vändbara lätthetsfunktioner*

Så vi har en samling timingfunktioner.

Deras användning kallas "easeIn".

Ibland behöver du visa animationen i omvänt läge. En funktionstransformation som ger denna effekt kallas "easeOut".

easeOut

I läget "easeOut" beräknas timingvärdet med formeln: timingEaseOut(timeFraction) = 1 — timing(1 — timeFraction)

Till exempel, studsfunktionen i "easeOut"-läge:

// normal version funktion bounce(timeFraction) ( för (var a = 0, b = 1, resultat; 1; a += b, b /= 2) ( if (timeFraction >= (7 - 4 * a) / 11 ) ( return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2); ) ) ) // omvandlare till easeOut-funktionen makeEaseOut(timing) (returfunktion) (timeFraction) ( return 1 - timing(1 - timeFraction); ) ) var bounceEaseOut = makeEaseOut(bounce);

Ett komplett exempel - studsningen i bounceEaseOut är nu inte i början, utan i slutet (och det här är mycket vackrare):
Den här grafen visar att easeOut-transformationen ändrar funktionens beteende:

Om det finns en animationseffekt, till exempel studsande, kommer den att visas i slutet, inte i början (eller tvärtom, i början, inte i slutet).

Rött indikerar det normala alternativet och blått indikerar easeOut.

• Vanligtvis hoppar det animerade objektet först långsamt längst ner och når sedan, i slutet, plötsligt toppen...
• Och efter easeOut - hoppar han först upp och hoppar sedan långsamt ner.

easeInOut

Du kan också göra detta för att visa effekten både i början och i slutet av animeringen. Motsvarande transformation kallas "easeInOut".

Dess kod ser ut så här:

Om (tidsfraktion 1) tidsfraktion = 1; // aktuellt animationsläge var progress = options.timing(timeFraction) options.draw(progress); if (tidsfraktion< 1) { requestAnimationFrame(animate); } }); }

Huvudparametrar:

• duration – animationslängd i ms.
• timing är en funktion som bestämmer animeringsläget för varje bildruta. Får tidsdelen från 0 till 1, returnerar slutförandet av animationen från 0 till 1.
• draw är en funktion som ritar animationsläget från 0 till 1.

Denna funktion kan förbättras, till exempel att lägga till en fullständig återuppringning som ska anropas i slutet av animeringen.

Vi tittade på ett antal exempel för timing och easeOut, easeInOut-transformationer, som låter dig diversifiera dem. Till skillnad från att vi inte är begränsade till Bezier-kurvor, kan du implementera vad du vill.

Detsamma gäller dragfunktionen.

Denna implementering av animering har tre huvudsakliga tillämpningsområden:

• Icke-standardiserade uppgifter och krav som inte passar in i CSS-ramverket.
• IE9 stöd.
• Grafik, teckning på duk.

Uppgifter

Kan du inte delta i #ChromeDevSummit i år? Fånga allt innehåll (och mer!) på livestreamen, eller gå med dina kamrater för ett CDS Extended-evenemang på en värdplats i närheten. Om du vill veta mer, kolla in Chrome Dev Summit 2019-webbplatsen.

CSS kontra JavaScript-animationer

Paul är en design- och Perf Advocate

Evangeliserar Chrome och den mobila webben i Developer Relations-teamet på Google.

Det finns två primära sätt att skapa animationer på webben: med CSS och med JavaScript. Vilken du väljer beror verkligen på de andra beroenden av ditt projekt och vilka typer av effekter du försöker uppnå.

TL;DR

• Använd CSS-animationer för enklare "one-shot" övergångar, som att växla UI-elementtillstånd.
• Använd JavaScript-animationer när du vill ha avancerade effekter som att studsa, stoppa, pausa, spola tillbaka eller sakta ner.
• Om du väljer att animera med JavaScript, använd Web Animations API eller ett modernt ramverk som du är bekväm med.

De flesta grundläggande animationer kan skapas med antingen CSS eller JavaScript, men mängden ansträngning och tid varierar (se även CSS vs JavaScript-prestanda). Var och en har sina för- och nackdelar, men det här är bra riktlinjer:

• Använd CSS när du har mindre, fristående tillstånd för UI-element. CSS-övergångar och animationer är idealiska för att ta in en navigeringsmeny från sidan, eller visa ett verktygstips. Du kan sluta använda JavaScript för att kontrollera tillstånden, men själva animationerna kommer att finnas i din CSS.
• Använd JavaScript när du behöver betydande kontroll över dina animationer. Web Animations API är den standardbaserade metoden, tillgänglig idag i de flesta moderna webbläsare. Detta ger verkliga objekt, idealiska för komplexa objektorienterade applikationer. JavaScript är också användbart när du behöver stoppa, pausa, sakta ner eller vända dina animationer.
• Använd requestAnimationFrame direkt när du vill orkestrera en hel scen för hand. Detta är en avancerad JavaScript-metod, men kan vara användbar om du bygger ett spel eller ritar till en HTML-duk.

Alternativt, om du redan använder ett JavaScript-ramverk som inkluderar animeringsfunktioner, till exempel via jQuerys .animate()-metod eller GreenSocks TweenMax , så kan du tycka att det är mer praktiskt att hålla fast vid det för dina animationer.

Animera med CSS

Att animera med CSS är det enklaste sättet att få något att röra sig på skärmen. Detta tillvägagångssätt beskrivs som deklarativ eftersom du anger vad du vill ska hända.

Nedan är lite CSS som flyttar ett element 100px i både X- och Y-axeln. Det görs genom att använda en CSS-övergång som är inställd på att ta 500ms. När rörelseklassen läggs till ändras transformeringsvärdet och övergången börjar.

Box ( transform: translate(0, 0); transition: transform 500ms; ) .box.move ( transform: translate(100px, 100px); )

Förutom övergångens varaktighet finns det alternativ för lättnader, vilket i huvudsak är hur animationen känns. För mer information om lättnader, se Grunderna i lättnad guide.

Om du, som i kodavsnittet ovan, skapar separata CSS-klasser för att hantera dina animationer, kan du sedan använda JavaScript för att slå på och av varje animation:

Box.classList.add("flytta");

Att göra detta ger en bra balans till dina appar. Du kan fokusera på att hantera tillstånd med JavaScript och helt enkelt ställa in lämpliga klasser på målelementen och låta webbläsaren hantera animationerna. Om du går den här vägen kan du lyssna på övergångshändelser på elementet, men bara om du kan avstå från stöd för äldre versioner av Internet Explorer; version 10 var den första versionen som stödde dessa evenemang. Alla andra webbläsare har stött evenemanget under en tid.

JavaScriptet som krävs för att lyssna efter slutet av en övergång ser ut så här:

Var box = document.querySelector(.box"); box.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() ( // Hantera övergångsavslutningen.)

Förutom att använda CSS-övergångar kan du också använda CSS-animationer, som gör att du kan ha mycket mer kontroll över individuella animeringsnyckelrutor, varaktigheter och iterationer.

Obs: Om du är ny på animationer är nyckelbildrutor en gammal term från handritade animeringar. Animatörer skulle skapa specifika ramar för en handling, kallade nyckelrutor, som skulle fånga saker som den mest extrema delen av någon rörelse, och sedan skulle de börja rita alla individuella bildrutor mellan nyckelbildrutorna. Vi har en liknande process idag med CSS-animationer, där vi instruerar webbläsaren vilka värden CSS-egenskaper måste ha vid givna punkter, och den fyller i luckorna.

Du kan till exempel animera rutan på samma sätt med övergångar, men låta den animeras utan användarinteraktioner som att klicka, och med oändliga upprepningar. Du kan också ändra flera egenskaper samtidigt:

Box ( /* Välj animation */ animation-name: movingBox; /* Animationens varaktighet */ animation-duration: 1300ms; /* Antalet gånger vi vill att animationen ska köras */ animation-iteration-count: infinite; /* Får animationen att vända på varje udda iteration */ animation-direction: alternate ) @keyframes movingBox ( 0% ( transform: translate(0, 0); opacitet: 0,3; ) 25% ( opacitet: 0,9; ) 50 % ( transform: translate(100px, 100px); opacitet: 0,2; ) 100% ( transform: translate(30px, 30px); opacitet: 0,8; ) )

Med CSS-animationer definierar du själva animeringen oberoende av målelementet och använder egenskapen animation-name för att välja den animation som krävs.

Om du vill att dina CSS-animationer ska fungera på äldre webbläsare måste du lägga till leverantörsprefix. Många verktyg kan hjälpa dig att skapa de prefixversioner av CSS du behöver, så att du kan skriva den utan prefix i dina källfiler.

Animera med JavaScript och Web Animations API

Att skapa animationer med JavaScript är, i jämförelse, mer komplext än att skriva CSS-övergångar eller animationer, men det ger vanligtvis utvecklare betydligt mer kraft. Du kan använda Web Animations API för att antingen animera specifika CSS-egenskaper eller bygga komponerbara effektobjekt.

Du kan använda JavaScript för att skapa komplexa animationer, men är inte begränsad till följande element:

• Fyrverkeri
• Blackout-effekt
• Kollapsa eller veckla ut.
• Gå till eller lämna en sida
• Objektrörelser

Du kanske är intresserad av ett befintligt JavaScript-baserat animationsbibliotek: Script.Aculo.us.

Den här artikeln ger en grundläggande förståelse för hur du använder JavaScript för att skapa animationer.

JavaScript kan användas för att flytta flera DOM-element ( , eller något annat HTML-element) på sidor enligt något mönster som definieras av en logisk ekvation eller funktion.

JavaScript tillhandahåller följande två funktioner som ofta används i animeringsprogram.

• setTimeout(funktion, varaktighet) – denna funktion anropar funktion efter varaktighet millisekunder från det ögonblick den anropades.
• setInterval(funktion, varaktighet) – denna funktion anropar funktion efter varje varaktighet millisekund.
• clearTimeout(setTimeout_variable) - Denna funktion gör att alla timer som ställts in av setTimeout()-funktionerna rensas.

JavaScript kan också ställa in flera attribut för ett objekt, inklusive dess position på skärmen. Du kan ställa in attributet topp och vänster om objektet för att placera det var som helst på skärmen. Här är dess syntax.

// Ställ in avståndet från skärmens vänstra kant. object.style.left = avstånd i pixlar eller punkter; eller // Ett angivet avstånd från skärmens övre kant. object.style.top = avstånd i pixlar eller punkter;

Hand animation

Så låt oss implementera en enkel animering med DOM-objektegenskaper och JavaScript-funktioner enligt följande. Följande lista innehåller olika DOM-metoder.

• Vi använder JavaScript-funktionen getElementById() för att hämta ett DOM-objekt och tilldelar det sedan till den globala variabeln imgObj .
• Vi initierade funktionen init() för att initiera imgObj, där vi satte dess position och lämnade attribut.
• Vi anropar initieringsfunktionen när fönstret laddas.
• Slutligen anropar vi funktionen moveRight() för att öka det vänstra avståndet med 10 pixlar. Du kan också ställa in det till ett negativt värde för att flytta det till vänster.

Exempel

Prova följande exempel.

Animation i JavaScript

Klicka på knappen nedan för att flytta bilden till höger

Automatisk animering

I exemplet ovan såg vi hur bilden flyttas åt höger för varje klick. Vi kan automatisera denna process med funktionen setTimeout() i JavaScript så här:

• Funktionen moveRight() anropar funktionen setTimeout() för att ställa in positionen imgObj.
• Vi har lagt till en ny stop()-funktion för att rensa timern som ställts in av setTimeout() och ställer in objektet till dess ursprungliga position.

Exempel

Prova följande kodexempel.

Animation i JavaScript

Klicka på knapparna nedan för att bearbeta animeringen

Rollover med mushändelse

Här är ett enkelt exempel som visar bildrullning med en mushändelse.

Låt oss se vad vi använder i följande exempel:

• Medan den här sidan laddas kontrollerar "if"-satsen förekomsten av ett bildobjekt. Om bildobjektet inte är tillgängligt kommer detta block inte att exekveras.
• Image()-konstruktorn skapar och förladdar ett nytt bildobjekt med namnet image1.
• Egenskapen src är inställd på namnet på den externa bildfilen, kallad /images/html.gif.
• På samma sätt har vi skapat ett image2-objekt och tilldelar /images/http.gif till detta objekt.
• # (hash-tecknet) inaktiverar länken för att förhindra webbläsaren från att försöka navigera till URL:en när den klickas. Denna länk är en bild.
• Händelsehanteraren OnMouseOver anropas när användaren flyttar musen på länken, och händelsehanteraren onMouseOut anropas när användarens mus flyttar sig bort från linjen (bilden).
• När musen rör sig över bilden ändras bilden från den första bilden till den andra. När musen rör sig bort från bilden visas originalbilden.
• När musen flyttas bort från länken kommer den ursprungliga html.gif-bilden att visas på skärmen.

Rollover med mushändelser

Håll muspekaren över bilden för att se resultatet

Sammanfattning: Ett enkelt exempel: den gula blekningsmetoden. Animation med JavaScript-bibliotek. Ett mer komplext exempel: flytta och ändra storlek. CSS-övergångar.

Principen bakom blekning är att bakgrundsfärgen för blekningselementet ställs in på gul, och sedan, genom en serie steg, återgår dess färg till sin ursprungliga färg. Så om den ursprungliga bakgrundsfärgen var röd, är färgen sedan inställd på gul, sedan orange-gul, sedan orange, sedan röd-orange och sedan röd. Antalet steg som används avgör hur smidigt färgbytet sker, och tiden mellan stegen avgör hur länge färgbytet fortsätter. När du byter färger kan ett användbart faktum från CSS användas: en färg kan definieras som en trippel av vanliga tal eller som en hexadecimal sträng. Därför kan #FF0000 (röd färg) också definieras som rgb(255,0,0) . Att ändra från gult till rött i fem steg innebär därför att gå från rgb(255,255,0) (gul) till rgb(255,0,0) i följande fem steg:

rgb(255,255,0) rgb(255,192,0) rgb(255,128,0) rgb(255,64,0) rgb(255,0,0)

Mer komplext exempel: flytta och ändra storlek

Även om den gula blekningsmetoden visar animation är den något tråkig. När de flesta tänker på animation tänker de oftast på rörelse. En intressant teknik för att varna användaren om att något har hänt utan att avbryta deras arbetsflöde är att använda ett modelllöst meddelande. Istället för att visa en alert()-dialogruta som kräver att användaren klickar på OK innan de kan fortsätta, placera meddelandet helt enkelt i en flytande div på sidan som diskret stannar där tills den får bekräftelse. En andra ganska intressant sak kan då vara att låta användaren återgå till ett meddelande som de har bekräftat att de vill läsa det igen. Så låt oss implementera ett flytande meddelande som, när det klickas, kollapsar till hörnet av skärmen och sedan kan återställas igen när du klickar på det. Du kan titta på en kort demo av detta "kollapsande meddelande" (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html) för att få den allmänna idén.

Om du gör något seriöst animationsarbete, eller något seriöst JavaScript-arbete, är det nästan alltid värt att använda ett JavaScript-bibliotek. Detta gör att du kan skapa den önskade presentationen för användare utan att behöva oroa dig för de matematiska krångligheterna som krävs för att utföra animeringen. (Med det första exemplet ovan vet du nu hur du gör matematiken och hur du använder setInterval , men du kommer att spara tid och ansträngning genom att använda färdiga lösningar.)

Demon ovan använder jQuery-biblioteket (http://jquery.com/) för att få det att fungera, men som nämnt tillhandahåller de flesta bibliotek ett tillräckligt liknande animationskoncept för att du ska kunna implementera principdelen med ditt föredragna bibliotek. I huvudsak måste du göra följande:

Visa ett flytande meddelande i mitten av skärmen

När det klickas:

Flytta dess horisontella läge till det längst till höger

Flytta dess vertikala position uppåt

Ställ in dess bredd till 20px

Ställ in dess höjd till 20px

Gör dess densitet lika med 20%, så att den blir nästan genomskinlig och dölj texten i den

När den här "mini"-versionen av meddelandet klickas, återställ den till mitten av skärmen (dvs. motsatsen till vad vi gjorde för att komprimera det) och så att användaren får en tydlig bild av vad som hände med deras meddelande, hoppar från full storlek Meddelanden till minimeddelandet ska vara animerade (så att de kan se meddelandet "krympa" in i hörnet av fönstret).

Att animera med jQuery är väldigt enkelt: använd bara . animate() och ge det önskade slutresultatet av animeringen (och hur länge den ska köras):

$(ourObject).animate(( bredd: "20px", höjd: "20px", topp: "20px", höger: "20px", marginRight: "0px", opacitet: "0.2" ), 300);

Funktionen tar ourObject och ersätter på 300 millisekunder dess bredd och höjd med 20px, dess övre och högra positioner med 20px, dess marginal-höger stilegenskap med 0px och dess densitet (i webbläsare som stöder bilddensitet) med 20%. Sedan är det bara att programmera med stil