Inleiding tot jQuery-effecten
jQuery is een van de meest populaire javascript-bibliotheken die is ontworpen om de HTML DOM te vereenvoudigen, dwz de eigenschappen van het documentobjectmodel, zoals manipulatie en boomverplaatsing. Andere eigenschappen zoals event handling, Ajax en CSS-animatie zijn ook vereenvoudigd. Het is een open-source en een gratis bibliotheek die doorgaans wordt gebruikt in 73% van de 10 miljoen websites die tegenwoordig worden gebruikt. De kernfuncties van jQuery omvatten op DOM-elementen gebaseerde selectors, manipulatie en verplaatsing, waardoor het werken aan jQuery veel eenvoudiger en handiger wordt. In dit onderwerp gaan we meer te weten komen over jQuery-effecten.
Het wordt gebruikt om een zeer eenvoudig ogende interface te bieden voor verschillende soorten verbazingwekkende effecten. Met deze methoden kunnen de meest gebruikte functie-effecten snel worden gebruikt en toegepast, met minimale tot minimale configuraties. Het commando voor het tonen en verbergen van elementen is vrijwel hetzelfde als iedereen die ze zou willen zien zou verwachten. Show () commando wordt gebruikt om de elementen in een volledig ingepakte set te tonen en hide () commando wordt gebruikt om ze te verbergen.
Verschillende jQuery-effectmethoden:
Hier bespreken we enkele verschillende soorten jQuery-effectmethoden
1) Animeren ()
De animatiemethode wordt gebruikt om een aangepaste animatie voor een set CSS-eigenschappen uit te voeren. Deze methode wordt gebruikt om samen met CSS-stijlen de status van het element van de ene naar de andere status te wijzigen. De eigenschapswaarde wordt geleidelijk gewijzigd zodat een geanimeerd effect kan worden bereikt. Het ding dat moet worden opgemerkt, is dat alleen numerieke waarden kunnen worden geanimeerd, zoals de marge: 40 px. Aan de andere kant kunnen de waarden voor tekenreeksen niet worden geanimeerd, zoals achtergrondkleur: groen. Dit komt opnieuw met een uitzondering voor tekenreeksen zoals de show, verbergen en schakelen.
Syntaxis
(selector).animate((styles), duration, easing, callback)
Voorbeeld
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Vertraging ()
Zoals de naam al doet vermoeden, wordt deze gebruikt om de vertraging in te stellen voor alle functies die in de wachtrij staan voor de geselecteerde elementen.
Syntaxis
$(selector).delay(duration, NameOfQueue)
Voorbeeld
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Deze functie wordt gebruikt om te schakelen tussen de functies voor in- en uitfaden in verschillende vakken. Als een element vervaagt, kan deze functie fadeToggle () worden gebruikt om ze in te faden. De elementen in de verborgen vorm worden niet weergegeven als onderdeel van deze methode.
Syntaxis
$(selector).fadeToggle(duration, easing, callback)
Voorbeeld
$("label").click(func()(
$("#box").fadeToggle();
));
4) fadeTo ()
Deze methode wordt gebruikt om de dekking van alle te wijzigen
dat wil zeggen alinea-gerelateerde elementen geleidelijk. De opgegeven dekking in deze context verwijst naar de veranderende dekking van het effect.
Syntaxis
$(selector).fadeTo(duration, opacity, easing, callback)
Voorbeeld
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Deze methode is hetzelfde als voorgesteld door de naam. Dit wordt gebruikt om de wachtrij te wissen en alle items uit de wachtrij te verwijderen die niet zijn uitgevoerd. De functie voltooit zijn run zodra deze is gestart. Dit hangt samen met twee methoden, namelijk. queue () en dequeue ().
Syntaxis
$(selector).clearQueue(NameOfQueue)
Voorbeeld
$("label").click(func()(
$("box").clearQueue();
));
6) afwerking ()
Deze methode in jQuery wordt gebruikt om de actieve animator te beëindigen of te beëindigen, omdat deze wordt gebruikt om alle actieve animaties te stoppen en wordt gebruikt om alle in de wachtrij geplaatste animaties te verwijderen. Het wordt ook gebruikt om alle animaties voor een gevarieerd bereik van geselecteerde elementen te voltooien. Deze methode is vergelijkbaar met methoden zoals .stop die beide echte parameters heeft. Het grote verschil tussen deze methode en afwerking is dat de afwerkingmethode wordt gebruikt om de eigenschappen van CSS-elementeigenschappen van alle animaties in de wachtrij te stoppen en te pauzeren.
Syntaxis
$(selector).finish(NameOfQueue)
Voorbeeld
$("#complete").click(func()(
$("div1").finish();
));
7) dequeue ()
Deze methode wordt gebruikt om de volgende functie uit de wachtrij te verwijderen en wordt vervolgens gebruikt om de functie uit te voeren. Een wachtrij is een of meer functies die in de pijplijn staan te wachten om te worden uitgevoerd. Deze dequeue-methode wordt samen met de wachtrij-methode gebruikt. Eén element kan meerdere wachtrijen hebben. De fx-wachtrij is de meest voorkomende en tevens de standaardwachtrij.
Syntaxis
$(selector).dequeue(NameOfQueue)
Voorbeeld
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Dit is een andere handige methode in jQuery die wordt gebruikt om naar beneden te schuiven of de geselecteerde lijsten met elementen weer te geven. Het punt dat hier moet worden opgemerkt, is dat het ook werkt op de elementen met een verborgen indeling en het weergavetype wordt als geen weergegeven in het geval van CSS, maar de zichtbaarheid hoeft niet te worden verborgen.
Syntaxis
$(selector). slideDown (duration, easing, callback)
Voorbeeld
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
De methode slideUp () wordt gebruikt om alle
geselecteerde elementen. De elementen in de verborgen vorm worden helemaal niet weergegeven. Dit heeft dus geen invloed op de lay-out van de pagina.
Syntaxis
$(selector).slideUp(duration, easing, callback)
Voorbeeld
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
In tegenstelling tot de methode slideUp () wordt deze methode gebruikt om alle verborgen items weer te geven
elementen. Deze slidedown () -methode werkt op alle elementen die ook gerelateerd zijn aan de verborgen methoden in het geval van jQuery-methoden en de naam wordt ook weergegeven in de CSS maar de zichtbaarheid is niet verborgen.
Syntaxis
$(selector).slideDown(duration, easing, callback)
Voorbeeld
$("label").queue(func()(
$("p").slideDown();
));
11) Schakelen ()
Deze methode wordt gebruikt om te schakelen tussen weergeven en verbergen van verschillende
op basis van elementen. Deze methode wordt gebruikt om de zichtbaarheid van de elementen te controleren. De methode show () wordt gebruikt om zelfs uit te voeren wanneer het element verborgen is. Hide () wordt uitgevoerd, zelfs wanneer het element zichtbaar is. Zowel tonen als verbergen methoden in combinatie creëert een wisseleffect en daarom de methode wissel ().
Syntaxis
$(selector).toggle(duration, easing, callback)
Voorbeeld
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Deze methode wordt gebruikt om te schakelen tussen de functies slideUp () en slideDown () voor alle elementen op basis van de alinea. Deze methode wordt gebruikt om de elementen te controleren die zijn geselecteerd op zichtbaarheid. SlideDown () is de functie die kan worden uitgevoerd wanneer het element is verborgen. Het element slideUp () daarentegen moet worden uitgevoerd als het element zichtbaar is.
Syntaxis
$(selector).slideToggle(duration, easing, callback)
Voorbeeld
$("label").queue(func()(
$("p").slideToggle();
));
Met jQuery kunnen we de effecten op de webpagina toevoegen door een groot aantal functies te bieden die op verschillende selectors kunnen worden geplaatst. Het is aan jou, hoe je je websites effectvoller wilt maken. Ik hoop dat je ons artikel leuk vond. Houd ons blog in de gaten voor meer artikelen zoals deze.
Aanbevolen artikelen
Dit is een handleiding voor jQuery-effecten. Hier hebben we de verschillende soorten jQuery-effectmethoden besproken met syntaxis en voorbeeld. U kunt ook het volgende artikel bekijken voor meer informatie -
- Gebruik van JQuery
- jQuery-alternatieven
- MySQL Query-opdrachten
- Wat is procedure in SQL?
- jQuery querySelector