jQuery Kort gezegd jQuery Effects

Schakel alle jQuery-effectmethoden uit

Het is mogelijk om alle animatiemethoden die jQuery biedt uit te schakelen door simpelweg de waarde van de uit eigendom aan waar.

    Probeer me te animeren!

Wanneer uit ingesteld op waar, alle effectmethoden zullen niet animeren en worden in plaats daarvan onmiddellijk verborgen en getoond met behulp van de CSS-regels Geen weergeven en display: block. U kunt de animatie weer inschakelen door de uit eigendom a vals waarde.

     Probeer me te animeren!

Grokking the stop () Animatiemethode

Het is vaak nodig om een animatie die momenteel bezig is te stoppen voordat u een andere begint. Bijvoorbeeld wanneer u de aangepaste gebruikt MouseEnter en mouseLeave evenementen (of hover () methode), activeer je onbedoeld een element dat al aan het animeren is als gevolg van een vorige MouseEnter of mouseLeave evenement. Dit veroorzaakt een opeenhoping van wachtende animaties, wat resulteert in een trage interface. Om dit te voorkomen, gebruikt u gewoon de hou op() methode om de huidige animatie te stoppen voordat een nieuwe wordt gestart.

     Beweeg me boven me!

Verwijder de hou op() methoden uit de code en rol de muis meerdere malen over het element om de spookanimaties te zien optreden. Het continu omrollen van het element op de pagina resulteert in animatie-opbouw, wat meestal niet het gewenste resultaat is.

Opmerkingen: Bovendien is het mogelijk om niet alleen de huidige animatie in de wachtrij voor het geselecteerde element maar ook de hele wachtrij te stoppen door de hou op() methode een parameter van waar. Hiermee worden alle in de wachtrij geplaatste animaties, actief en inactief, gestopt.

Bepalen of een element aan het animeren is Gebruiken: geanimeerd

De gewoonte : geanimeerde selector filter kan worden gebruikt om elementen te selecteren die op dat moment aan het animeren zijn. Hieronder gebruik ik dit aangepaste selectorfilter om tekst aan een animatie toe te voegen

element.

Gebruik show (), hide () en toggle (), Without Animation

De ... gebruiken laten zien(), verbergen(), en knevel () Bij methoden met een parameter worden de elementen weergegeven of verborgen om te animeren door CSS-eigenschappen te wijzigen: hoogte, breedte, dekking, marge, opvulling. Het is mogelijk om animaties over te slaan om elementen te verbergen en weer te geven, simpelweg door geen parameters door te geven. Dit verandert hoe deze methoden de zichtbaarheid van een element aanpassen. De betrokken elementen worden eenvoudigweg weergegeven of verdwijnen zonder enige animatie door de CSS aan te passen tonen eigendom in plaats daarvan.

       Klik op mij (animatie verbergen)
 Klik op Me (geen animatie verbergen)

Opmerkingen: De jQuery-methoden verbergen(), laten zien(), knevel (), slideUp (), naar beneden glijden(), slideToggle (), indien gebruikt op elementen die een CSS hebben tonen waarde van in lijn, wordt gewijzigd in display: block voor de duur van de animatie.

Grokking opeenvolgende en niet-sequentiële animaties

Het is belangrijk om het verschil te begrijpen tussen animaties die tegelijkertijd plaatsvinden en animaties die in de loop van de tijd in een volgorde voorkomen. Wanneer effectmethoden worden geketend, worden deze standaard aan een wachtrij toegevoegd en vindt elk effect de een na de ander.

     Animeer me! 
  Animeer me!

De ... gebruiken animeren () methode, kunt u instellen dat animaties niet-sequentieel of tegelijkertijd plaatsvinden door alle CSS-eigenschapswijzigingen door te geven aan een enkele animeren () method call. In de onderstaande code, de

zal tegelijkertijd de breedte en de breedte van de linkerrand animeren.

    Animeer me!

Animeren () is de basis, laag-niveau abstractie

De animeren () methode is de basismethode die wordt gebruikt om alle vooraf geconfigureerde animaties te construeren, bijvoorbeeld. verbergen(), naar beneden glijden(). Het biedt de mogelijkheid om (in de loop van de tijd) de waarden van stijleigenschappen te wijzigen.

Dit is wat u moet weten wanneer u deze methode gebruikt.

Alleen eigenschappen met numerieke waarden worden ondersteund. Met andere woorden, u kunt de waarde van bijvoorbeeld het. Niet animeren Achtergrond kleur eigendom (althans niet zonder een plug-in). Ook eigenschappen die meer dan één waarde vereisen backgroundPosition kan niet worden geanimeerd.
U kunt CSS-eigenschappen animeren door em en% te gebruiken waar van toepassing.
Relatieve animaties kunnen worden opgegeven met behulp van "+ =" of "- =" voor de eigenschapswaarde. Dit zou bijvoorbeeld een element positief of negatief verplaatsen ten opzichte van zijn huidige positie.
Als u een animatieduur van 0 opgeeft, stelt de animatie de elementen onmiddellijk in op hun eindstatus.
Als een snelkoppeling, als een waarde van toggle wordt gepasseerd, een animatie zal eenvoudigweg omkeren van waar het is en animeren om dat doel te bereiken.
Alle CSS-eigenschappen ingesteld via een enkele animeren () methode zal tegelijkertijd animeren.

Grokking de jQuery Fading Methods

Drie concepten moeten worden opgeroepen bij het gebruik van de fadeIn (), Fadeout (), en vervaag naar() methoden.

In tegenstelling tot andere effectmethoden, passen fading-methoden alleen de dekking van een element aan. Bij gebruik van deze effectmethoden wordt ervan uitgegaan dat een element dat vaag is al een hoogte en breedte heeft.
Fading-animaties vervagen elementen uit hun huidige dekking.
De ... gebruiken Fadeout () methode vervaagt een element uit de huidige dekking en dan één keer 100% vervaagd, verandert het de CSS-weergave-eigenschap van het element in "geen".

Elk van de bovengenoemde punten wordt geïllustreerd in de onderstaande code.

Code

jQuery Kort gezegd jQuery Introductie

jQuery Kort gezegd jQuery en de webbrowser