Accentsconagua

jQuery Succinctly jQuery Effects

Koda
Share

Inaktivera alla jQuery-effektmetoder

Det är möjligt att inaktivera alla animeringsmetoder jQuery tillhandahåller genom att helt enkelt ställa in värdet på av egendom till Sann.

    
Försök att animera mig!

När av är satt till Sann, alla effektmetoder kommer inte att animera och kommer istället att döljas och visas omedelbart med hjälp av CSS-reglerna display: none och display: block. Du kan aktivera animationen igen genom att passera av egendom a falsk värde.

    
 Försök att animera mig!

Grokke stoppet () Animeringsmetod

Det är ofta nödvändigt att stoppa en animering som pågår innan du börjar en annan. Till exempel när du använder anpassningen mouseenter och mouseleave händelser (eller sväva() metod) kan du oavsiktligt utlösa ett element som redan animerar på grund av en tidigare mouseenter eller mouseleave händelse. Detta medför en uppbyggnad av animationer i kö, vilket resulterar i ett trögt gränssnitt. För att undvika detta, använd helt enkelt sluta() metod för att stoppa den aktuella animationen innan du börjar en ny.

    
 Häng över mig!

Ta bort sluta() metoder från koden och rulla musen över elementet flera gånger för att se spökanimationerna inträffar. Att rulla kontinuerligt över elementet på sidan kommer att resultera i animationsuppbyggnad, vilket vanligtvis inte är det önskade resultatet.

Anmärkningar: Dessutom är det möjligt att inte bara stoppa den aktuella animationen i köen för väljelementet utan även hela köen genom att passera sluta() Metod en parameter för true. Detta kommer effektivt stoppa alla kö animationer, aktiv och inaktiv.

Bestämma om ett element är animerat med: animerat

Kunden :animerad selektorfilter kan användas för att välja element som för närvarande animerar. Nedan använder jag det här anpassade väljarfiltret för att lägga till text till en animering

element.

Använd show (), hide (), och växla (), utan animering

Använda show(), Dölj(), och toggle () metoder med en parameter kommer att få elementen att visas eller gömda att animera genom att ändra CSS egenskaper: höjd, bredd, opacitet, marginal, vaddering. Det går att hoppa över animeringar för att gömma och visa element helt enkelt genom att inte övergå några parametrar. Detta ändrar hur dessa metoder anpassar synligheten för ett element. Berörda element kommer helt enkelt att visas eller försvinna utan animering genom att justera CSS visa egendom istället.

       
Klicka på mig (göm animering)
 
Klicka på mig (göm ingen animering)

Anmärkningar: JQuery-metoderna Dölj(), show(), toggle (), glid upp(), glida ner(), slideToggle (), när den används på element som har en CSS visa värdet av i kö, kommer att ändras till display: block under animeringens längd.

Grokking Sekventiella och icke-sekventiella animeringar

Det är viktigt att förstå skillnaden mellan animationer som händer samtidigt och animeringar som uppträder i en sekventiell ordning över tiden. Som standard, när effektmetoder är länkade, läggs de till i en kö, och varje effekt inträffar en efter en.

    
 Animera mig! 
 
 Animera mig!

Använda animera() metod kan du ställa in animeringar för att inträffa i följd eller samtidigt genom att överföra alla CSS-egenskapsändringar till en enda animera() metodsamtal. I koden nedan är

kommer att animera dess bredd och gränsen till vänster bredd samtidigt.

    
Animera mig!

Animate () är bas-, lågnivå-abstraktion

De animera() Metoden är basmetoden som används för att konstruera alla förkonfigurerade animationer, t ex. Dölj(), glida ner(). Det ger möjlighet att ändra (över tiden) värdena på stilegenskaper.

Här är vad du behöver veta när du använder den här metoden.

  • Endast egenskaper som tar numeriska värden stöds. Med andra ord kan du inte animera värdet av, säg bakgrundsfärg egendom (åtminstone inte utan plugin). Egenskaper som tar mer än ett värde som backgroundPosition kan inte animeras.
  • Du kan animera CSS-egenskaper genom att använda em och% där så är tillämpligt.
  • Relativa animeringar kan specificeras med "+ =" eller "- =" framför egenskapsvärdet. Detta skulle till exempel flytta ett element positivt eller negativt i förhållande till dess nuvarande position.
  • Om du anger en animationsvaraktighet på 0, ställer animeringen omedelbart in elementen till deras slutstatus.
  • Som en genväg, om ett värde av toggle är passerat, kommer en animation helt enkelt att vända från var den är och animera till det ändamålet.
  • Alla CSS-egenskaper ställs in via en enda animera() Metoden kommer att animera samtidigt.

Grokking jQuery Fading Methods

Tre begrepp måste utropas vid användning av FadeIn (), tona ut(), och fadeTo () metoder.

  • Till skillnad från andra effektmetoder justerar fadingmetoder endast opaciteten hos ett element. Det antas att när man använder dessa effektmetoder att något element som bleknar redan har en höjd och bredd.
  • Fading animationer kommer att blekna element från deras nuvarande opacitet.
  • Använda tona ut() Metoden kommer att blekna ett element från dess nuvarande opacitet, och då en gång 100% bleknat kommer det att ändra elementets CSS-displayegenskap till "ingen".

Var och en av de ovan nämnda punkterna illustreras i koden nedan.
Koda
×