jQuery-effekte - gly


Die jQuery-skyfiemetodes skuif elemente op en af.

Klik om die paneel af/op te gly

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 slideDown() metode.


Demonstreer die jQuery slideUp() metode.


Demonstreer die jQuery slideToggle() metode.


jQuery gly metodes

Met jQuery kan jy 'n gly-effek op elemente skep.

jQuery het die volgende skyfiemetodes:

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() Metode

Die jQuery slideDown()-metode word gebruik om 'n element af te gly.

Sintaksis:

$(selector).slideDown(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 gly voltooi is.

Die volgende voorbeeld demonstreer die slideDown()metode:

Voorbeeld

$("#flip").click(function(){
  $("#panel").slideDown();
});


jQuery slideUp() Metode

Die jQuery slideUp()-metode word gebruik om 'n element op te skuif.

Sintaksis:

$(selector).slideUp(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 gly voltooi is.

Die volgende voorbeeld demonstreer die slideUp()metode:

Voorbeeld

$("#flip").click(function(){
  $("#panel").slideUp();
});

jQuery slideToggle() Metode

Die jQuery slideToggle()-metode wissel tussen die slideDown()en slideUp() metodes.

As die elemente af geskuif is, slideToggle()sal hulle opskuif.

As die elemente opgeskuif is, slideToggle()sal hulle afskuif.

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

Die opsionele spoedparameter kan die volgende waardes neem: "stadig", "vinnig", millisekondes.

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

Die volgende voorbeeld demonstreer die slideToggle()metode:

Voorbeeld

$("#flip").click(function(){
  $("#panel").slideToggle();
});

jQuery Oefeninge

Toets jouself met oefeninge

Oefening:

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

$("div").();


jQuery Effekte Verwysing

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