Introduktion till jQuery Effects
jQuery är ett av de mest populära javascript-biblioteken som är utformat för att förenkla HTML DOM, det vill säga dokumentobjektmodellegenskaper som manipulation och trädkorsning. Andra egenskaper som händelsehantering, Ajax och CSS-animering är också förenklade. Det är en öppen källkod och ett gratis bibliotek som vanligtvis används på 73% av de 10 miljoner webbplatser som används idag. Kärnfunktionerna i jQuery inkluderar DOM-elementbaserade väljare, manipulation och genomgång vilket gör att arbeta med jQuery mycket enklare och bekvämt. I det här ämnet kommer vi att lära oss om jQuery Effects.
Det används för att ge ett mycket enkelt snyggt gränssnitt för att göra olika typer av fantastiska effekter. Dessa metoder gör det möjligt att snabbt använda och använda de vanligaste funktionseffekterna tillsammans med bara till minimala konfigurationer. Kommandot för att visa och dölja element är ungefär detsamma som den som är villig att se dem skulle förvänta sig. Kommando Visa () används för att visa elementen i ett helt inslaget set och dölj () -kommando används för att dölja dem.
Olika metoder för jQuery-effekt:
Här diskuterar vi olika typer av jQuery Effect Methods
1) Animera ()
Den animerade metoden används för att utföra en anpassad baserad animation för en uppsättning CSS-egenskaper. Den här metoden används för att ändra elementets tillstånd från ett tillstånd till ett annat tillsammans med CSS-stilar. Fastighetsvärdet ändras gradvis så att en animerad effekt kan uppnås. Det som bör noteras är att endast numeriska värden kan animeras, till exempel marginalen: 40px. Å andra sidan kan värdena för strängar inte animeras, till exempel bakgrundsfärg: grön. Detta kommer igen med ett undantag för strängar som showen, dölja och växla.
Syntax
(selector).animate((styles), duration, easing, callback)
Exempel
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Försening ()
Som namnet antyder används den här för att ställa in fördröjningen för alla funktioner som står i kö på de valda elementen.
Syntax
$(selector).delay(duration, NameOfQueue)
Exempel
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Denna funktion används för att växla mellan fade in och fade out-funktioner på olika rutor. Om något element bleknar kan denna funktion fadeToggle () användas för att bleka dem in. Elementen som är i den dolda formen kommer inte att visas som en del av denna metod.
Syntax
$(selector).fadeToggle(duration, easing, callback)
Exempel
$("label").click(func()(
$("#box").fadeToggle();
));
4) fadeTo ()
Den här metoden används för att ändra opaciteten hos alla
dvs stycken relaterade element gradvis. Den angivna opaciteten i detta sammanhang avser den förändrade effekten opaciteten.
Syntax
$(selector).fadeTo(duration, opacity, easing, callback)
Exempel
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Den här metoden är densamma som föreslagits av namnet. Detta används för att rensa kön och tar bort alla objekt från kön som inte har körts. Funktionen kommer att slutföra sin körning när den har börjat köras. Detta är relaterat till två metoder, nämligen. kö () och dequeue ().
Syntax
$(selector).clearQueue(NameOfQueue)
Exempel
$("label").click(func()(
$("box").clearQueue();
));
6) finish ()
Den här metoden i jQuery används för att avsluta eller avsluta den aktuella animatorn, eftersom den används för att stoppa alla animationer som för närvarande körs och används för att ta bort alla animerade köer. Det används också för att slutföra alla animationer för ett varierat utbud av utvalda element. Denna metod liknar metoder såsom .stop som har båda riktiga parametrar. Den största skillnaden mellan denna metod och finish är att finishmetoden används för att stoppa och pausa CSS-elementets egenskaper för alla animerade köer.
Syntax
$(selector).finish(NameOfQueue)
Exempel
$("#complete").click(func()(
$("div1").finish();
));
7) dequeue ()
Den här metoden används för att ta bort nästa funktion från kön och används sedan för att köra funktionen. En kö är en eller flera funktioner som är i rörledningen som väntar på att köras. Denna dequeue-metod används tillsammans med kömetoden. Ett element kan ha flera köer. Fx-kön är den vanligaste som också är standardkön.
Syntax
$(selector).dequeue(NameOfQueue)
Exempel
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Detta är en annan användbar metod i jQuery som används för att glida ner eller visa de valda elementlistorna. Det som ska noteras här är att det också fungerar på elementen som är i dolda format och displaytypen visas som ingen i fallet med CSS men synligheten behöver inte döljas.
Syntax
$(selector). slideDown (duration, easing, callback)
Exempel
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
Metoden slideUp () används för att dölja alla
valda element. Elementen i den dolda formen visas inte alls. Detta påverkar därför inte sidans layout.
Syntax
$(selector).slideUp(duration, easing, callback)
Exempel
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
Till skillnad från metoden slideUp () används den här metoden för att visa alla dolda
element. Denna slidedown-metod fungerar på alla element som också är relaterade till de dolda metoderna för jQuery-metoder och namnet visas också i CSS men synligheten är inte dold.
Syntax
$(selector).slideDown(duration, easing, callback)
Exempel
$("label").queue(func()(
$("p").slideDown();
));
11) Växla ()
Denna metod används för att växla mellan show och dölja olika
baserade element. Denna metod används för att kontrollera om elementen är synliga. Metoden show () används för att köras även när elementet är dold. Hide () körs även när elementet är synligt. Både visar och döljer metoder i kombination skapar en växlingseffekt och därför växlar metoden ().
Syntax
$(selector).toggle(duration, easing, callback)
Exempel
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Den här metoden används för att växla mellan funktionen slideUp () och slideDown () för alla element baserade på stycket. Den här metoden används för att kontrollera de element som är valda för synlighet. SlideDown () är den funktion som kan ses köras när elementet är dold. Däremot är elementet slideUp () det som ska köras om elementet är synligt.
Syntax
$(selector).slideToggle(duration, easing, callback)
Exempel
$("label").queue(func()(
$("p").slideToggle();
));
jQuery gör det möjligt för oss att lägga till effekterna på webbsidan genom att tillhandahålla många mängder funktioner som kan placeras på olika väljare. Det är på dig hur du vill göra dina webbplatser mer effektfyllda. Hoppas att du har gillat vår artikel. Håll dig uppdaterad på vår blogg för fler artiklar som dessa.
Rekommenderade artiklar
Detta är en guide till jQuery Effects. Här har vi diskuterat olika typer av metoder för jQuery Effects med syntax och exempel. Du kan också titta på följande artikel för att lära dig mer -
- Användningar av JQuery
- jQuery-alternativ
- MySQL Query-kommandon
- Vad är procedur i SQL?
- jQuery querySelector