Jquery smidig transparensförändring. Hur man gör en smidig transparens av ett webbelement med jQuery

Resultatet av vårt exempel.

Animation på moderna webbsidor har länge tagits för givet. Bleknade element, flygande meddelanden, glidande bildgallerier förbättrar användarupplevelsen och ökar webbplatsens prestanda. I det populära javascript-biblioteket är jQuery fadeIn () en av de grundläggande animationsfunktionerna. Den kontrollerar blockens transparens.

Tona effekter

Metoden fadeIn () ändrar transparensen för det skickade elementet till 100 %. I jQuery-biblioteket är det parat med fadeOut ()-funktionen, som kan användas för att omintetgöra transparensen och därigenom "lösa upp" elementet.

En liknande effekt kan uppnås med metoden fadeTo () som har ett ännu bredare inflytande. FadeTo () kan ställa in vilket transparensvärde som helst i intervallet 0 till 1.

Metodsyntax

Metoden fadeIn () i jQuery anropas i sammanhanget med elementet vars opacitet måste ändras. Det kan ta från noll till tre parametrar:

Element.fadeIn (); element.fadeIn (varaktighet); element.fadeIn (varaktighet, återuppringning); element.fadeIn (varaktighet, lättnad, återuppringning); element.fadeIn (config);

Argumentet varaktighet anger hur lång tid animeringen kommer att ta. Det kan vara ett tal som representerar antalet millisekunder, eller ett av nyckelorden:

• "snabb" (200ms);
• "långsam" (600ms);

Om ingen varaktighet har ställts in, är den som standard 400 millisekunder.

Callback-parametern anger en funktion som kommer att anropas omedelbart efter att animeringen är klar. Callback-funktionen accepterar inga parametrar. Denna variabel i den hänvisar till DOM-noden som modifieras.

Lättningsargumentet styr timingen för animeringen, det vill säga dess hastighet över tiden. Du kan använda den för att snabba upp början och sakta ner slutet av animationen, eller för att göra den enhetlig hela tiden. Argumentvärdet är en sträng som innehåller nyckelordet, som standard är detta "swing"-funktionen.

I det följande kommer fadeIn () att öka genomskinligheten för elementet med klassen .block i en sekund, varefter det kommer att skriva ut ett meddelande till konsolen:

$ (". block"). fadeIn (1000, linjär, funktion () (console.log ("Animering klar");));

Om de listade parametrarna inte räcker till kan metoden skickas till ett konfigurationsobjekt, som kan innehålla upp till 11 olika inställningar.

Återuppringningsfunktioner

Callback-parametern som skickas till jQuerys fadeIn ()-metod är ett mycket användbart alternativ eftersom egenskapsändringar utförs asynkront utan att blockera det allmänna flödet av kodexekvering.

Const callback = funktion () (console.log ("Animering slutförd");); $ (". element"). fadeIn (1000); ring tillbaka ();

I det här exemplet kommer funktionen att köras direkt efter att animeringen startar, utan att vänta på att elementet ska visas helt.

För att allt ska fungera som det är tänkt, använd callback-argumentet för att fånga slutet av animationen:

Const callback = funktion () (console.log ("Animering slutförd");); $ (". element"). fadeIn (1000, callback);

Nu kommer ett meddelande att visas i konsolen först när elementet blir fullt synligt.

Full transparens och elementdöljande

Som du vet tar nollvärdet för opacitetsegenskapen inte bort elementet från sidan, utan gör det bara osynligt. Detta beteende är inte lämpligt om vi vill dölja ett block.

Därför fungerar jQuery fade-metoderna fadeIn (), fadeTo () och fadeOut () med transparens i kombination med display-egenskapen. Ett helt genomskinligt element döljs med hjälp av displayen: ingen regel, och denna regel avbryts innan den visas.

Ändrar transparensnivån för de valda elementen på sidan. Låter dig ändra genomskinlighet smidigt. Metoden har två användningsfall:

varaktighet- varaktigheten av förändringen i öppenhet. Det kan anges i millisekunder eller strängvärdet "snabbt" eller "långsamt" (200 och 600 millisekunder).
opacitet- värdet av den nödvändiga insynen. Måste anges som ett tal från 0 till 1 (0 - full transparens, 1 - ingen transparens).
ring tillbaka- Den funktion som anges som hanteraren för slutförande av transparensändringar. Inga parametrar skickas till den, men inuti funktionen kommer denna variabel att innehålla DOM-objektet för elementet vars transparens ändras. Om det finns flera sådana element kommer hanteraren att anropas separat för varje element.

varaktighet- se beskrivning ovan. Som standard är parametern 400
opacitet- se ovan.
lättnader- dynamiken i förändringen i transparens (om den kommer att sakta ner i slutet av utförandet eller tvärtom, den kommer att accelerera). (Se beskrivning)
ring tillbaka- se ovan.

• ändra transparens
• ställ in transparens för ett element
• ställ in transparensnivå till element
• element transparens
• .fadeTo ()
• fadeTo ()

Senast uppdaterad: 1.11.2015

Transparenseffekter tillåter oss att, genom att smidigt ändra genomskinligheten för ett element, dölja eller visa det. Transparenseffekter implementeras med metoderna fadeOut (), fadeIn (), fadeTo () och fadeToggle ().

Metoderna fadeOut (), fadeIn () och fadeToggle () har liknande användningsområden:

fadeOut / fadeIn / fadeToggle (): metod utan parametrar

fadeOut / fadeIn / fadeToggle ([, lättnad] [, komplett]). Durationsparametern anger hur lång tid elementets opacitetsändring kommer att ta. Som standard är dess värde 400 millisekunder.

Lättningsparametern, som tar namnet på easingfunktionen som en sträng. Som standard är dess värde "swing". Du kan också använda "långsamma" och "snabba" värden, som motsvarar effektvaraktigheter på 600 och 200 millisekunder.

Den fullständiga parametern representerar en återuppringningsfunktion som ska anropas av metoden när animeringen är klar

FadeTo-metoden, till skillnad från andra metoder, accepterar också opacitetsparametern - den tar ett värde till vilket elementets transparens måste ändras: fadeTo (varaktighet, opacitet [, easing] [, komplett]). Opacitetsvärdet sträcker sig från 0 (helt transparent) till 1 (helt synligt).

Låt oss säga att vi har en bild på sidan och två knappar som kommer att ändra genomskinligheten för denna bild:

Visa Dölj

Observera att fadeIn-metoden ökar transparensen till det värde den var innan med fadeOut-metoden, och inte nödvändigtvis till 1. Det vill säga, i det här fallet, eftersom fadeTo-metoden användes i början och transparensen ändrades till 0,6, fadeIn-metoden kommer också att öka transparensen upp till 0,6.