jQuery-effecten - vervagen
Met jQuery kunt u elementen in en uit de zichtbaarheid laten vervagen.
Klik om het paneel in/uit te faden
Omdat tijd kostbaar is, leveren we snel en gemakkelijk leren.
Bij W3Schools kun je alles bestuderen wat je moet leren, in een toegankelijk en handig formaat.
Voorbeelden
Demonstreert de jQuery fadeIn()-methode.
Demonstreert de jQuery fadeOut()-methode.
Demonstreert de jQuery fadeToggle()-methode.
Demonstreert de jQuery fadeTo()-methode.
jQuery-vervagingsmethoden
Met jQuery kun je een element in en uit de zichtbaarheid laten vervagen.
jQuery heeft de volgende fade-methoden:
fadeIn()fadeOut()fadeToggle()fadeTo()
jQuery fadeIn()-methode
De jQuery- fadeIn()methode wordt gebruikt om een verborgen element in te faden.
Syntaxis:
$(selector).fadeIn(speed,callback);
De optionele snelheidsparameter specificeert de duur van het effect. Het kan de volgende waarden aannemen: "slow", "fast" of milliseconden.
De optionele callback-parameter is een functie die moet worden uitgevoerd nadat het vervagen is voltooid.
Het volgende voorbeeld demonstreert de fadeIn()methode met verschillende parameters:
Voorbeeld
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut()-methode
De jQuery- fadeOut()methode wordt gebruikt om een zichtbaar element uit te faden.
Syntaxis:
$(selector).fadeOut(speed,callback);
De optionele snelheidsparameter specificeert de duur van het effect. Het kan de volgende waarden aannemen: "slow", "fast" of milliseconden.
De optionele callback-parameter is een functie die moet worden uitgevoerd nadat het vervagen is voltooid.
Het volgende voorbeeld demonstreert de fadeOut()methode met verschillende parameters:
Voorbeeld
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() Methode
De jQuery- fadeToggle()methode schakelt tussen de fadeIn()en fadeOut()
methoden.
Als de elementen vervagen, fadeToggle()vervagen ze.
Als de elementen zijn vervaagd, fadeToggle()vervagen ze.
Syntaxis:
$(selector).fadeToggle(speed,callback);
De optionele snelheidsparameter specificeert de duur van het effect. Het kan de volgende waarden aannemen: "slow", "fast" of milliseconden.
De optionele callback-parameter is een functie die moet worden uitgevoerd nadat het vervagen is voltooid.
Het volgende voorbeeld demonstreert de fadeToggle()methode met verschillende parameters:
Voorbeeld
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() Methode
Met de jQuery- fadeTo()methode kunt u vervagen tot een bepaalde dekking (waarde tussen 0 en 1).
Syntaxis:
$(selector).fadeTo(speed,opacity,callback);
De vereiste snelheidsparameter specificeert de duur van het effect. Het kan de volgende waarden aannemen: "slow", "fast" of milliseconden.
De vereiste dekkingsparameter in de fadeTo()methode specificeert vervaging naar een bepaalde dekking (waarde tussen 0 en 1).
De optionele callback-parameter is een functie die moet worden uitgevoerd nadat de functie is voltooid.
Het volgende voorbeeld demonstreert de fadeTo()methode met verschillende parameters:
Voorbeeld
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
jQuery-oefeningen
jQuery Effecten Referentie
Ga voor een compleet overzicht van alle jQuery-effecten naar onze jQuery-effectreferentie .