jQuery-effekte - Vervaag


Met jQuery kan jy elemente in en uit sigbaarheid vervaag.

Klik om in/uit-paneel te vervaag

Omdat tyd waardevol is, lewer ons vinnige en maklike leer.

By W3Schools kan jy alles bestudeer wat jy nodig het om te leer, in 'n toeganklike en handige formaat.


Voorbeelde


Demonstreer die jQuery fadeIn() metode.


Demonstreer die jQuery fadeOut() metode.


Demonstreer die jQuery fadeToggle() metode.


Demonstreer die jQuery fadeTo() metode.


jQuery Fading Metodes

Met jQuery kan jy 'n element in en uit sigbaarheid vervaag.

jQuery het die volgende vervaagmetodes:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() Metode

Die jQuery fadeIn()-metode word gebruik om 'n verborge element in te vervaag.

Sintaksis:

$(selector).fadeIn(speed,callback);

Die opsionele spoedparameter spesifiseer die duur van die effek. Dit kan die volgende waardes neem: "stadig", "vinnig" of millisekondes.

Die opsionele terugbelparameter is 'n funksie wat uitgevoer moet word nadat die vervaag voltooi is.

Die volgende voorbeeld demonstreer die fadeIn()metode met verskillende parameters:

Voorbeeld

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});


jQuery fadeOut() Metode

Die jQuery fadeOut()-metode word gebruik om 'n sigbare element uit te verdof.

Sintaksis:

$(selector).fadeOut(speed,callback);

Die opsionele spoedparameter spesifiseer die duur van die effek. Dit kan die volgende waardes neem: "stadig", "vinnig" of millisekondes.

Die opsionele terugbelparameter is 'n funksie wat uitgevoer moet word nadat die vervaag voltooi is.

Die volgende voorbeeld demonstreer die fadeOut()metode met verskillende parameters:

Voorbeeld

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

jQuery fadeToggle() Metode

Die jQuery fadeToggle()-metode wissel tussen die fadeIn()en fadeOut() metodes.

As die elemente vervaag is, fadeToggle()sal dit vervaag.

As die elemente vervaag is, fadeToggle()sal hulle vervaag.

Sintaksis:

$(selector).fadeToggle(speed,callback);

Die opsionele spoedparameter spesifiseer die duur van die effek. Dit kan die volgende waardes neem: "stadig", "vinnig" of millisekondes.

Die opsionele terugbelparameter is 'n funksie wat uitgevoer moet word nadat die vervaag voltooi is.

Die volgende voorbeeld demonstreer die fadeToggle()metode met verskillende parameters:

Voorbeeld

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo() Metode

Die jQuery fadeTo()-metode laat vervaag na 'n gegewe ondeursigtigheid toe (waarde tussen 0 en 1).

Sintaksis:

$(selector).fadeTo(speed,opacity,callback);

Die vereiste spoedparameter spesifiseer die duur van die effek. Dit kan die volgende waardes neem: "stadig", "vinnig" of millisekondes.

Die vereiste ondeursigtigheidsparameter in die fadeTo()metode spesifiseer vervaag tot 'n gegewe ondeursigtigheid (waarde tussen 0 en 1).

Die opsionele terugbelparameter is 'n funksie wat uitgevoer moet word nadat die funksie voltooi is.

Die volgende voorbeeld demonstreer die fadeTo()metode met verskillende parameters:

Voorbeeld

$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
});

jQuery Oefeninge

Toets jouself met oefeninge

Oefening:

Gebruik 'n jQuery-metode om ' n <div>-element te vervaag .

$("div").();


jQuery Effekte Verwysing

Vir 'n volledige oorsig van alle jQuery-effekte, gaan asseblief na ons jQuery-effekverwysing .