jQuery-effecten - Verbergen en weergeven


Verbergen, tonen, wisselen, schuiven, vervagen en animeren. WAUW!

Klik om het paneel te tonen/verbergen

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 een eenvoudige jQuery hide()-methode.


Nog een hide() demonstratie. Hoe delen van tekst te verbergen.


jQuery hide() en show()

Met jQuery kunt u HTML-elementen verbergen en weergeven met de methoden hide()en show():

Voorbeeld

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Syntaxis:

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

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

De optionele snelheidsparameter specificeert de snelheid van het verbergen/weergeven en kan de volgende waarden aannemen: "langzaam", "snel" of milliseconden.

De optionele callback-parameter is een functie die moet worden uitgevoerd nadat de methode hide()of show()is voltooid (u leert meer over callback-functies in een later hoofdstuk).

Het volgende voorbeeld demonstreert de snelheidsparameter met hide():

Voorbeeld

$("button").click(function(){
  $("p").hide(1000);
});


jQuery-toggle()

toggle()Je kunt met de methode ook schakelen tussen verbergen en tonen van een element .

Getoonde elementen zijn verborgen en verborgen elementen worden getoond:

Voorbeeld

$("button").click(function(){
  $("p").toggle();
});

Syntaxis:

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

De optionele snelheidsparameter kan de volgende waarden aannemen: "langzaam", "snel" of milliseconden.

De optionele callback-parameter is een functie die moet worden uitgevoerd nadat toggle()deze is voltooid.


jQuery-oefeningen

Test jezelf met oefeningen

Oefening:

Gebruik een jQuery-methode om een <p>-element te verbergen wanneer erop wordt geklikt.

$("p").click(function(){
  $(this).();
});


jQuery Effecten Referentie

Ga voor een compleet overzicht van alle jQuery-effecten naar onze jQuery-effectreferentie .