jQuery Sliding

De jQuery slide methoden worden gebruikt om tags uit- en in te vouwen.

jQuery slideDown() methode

De jQuery slideDown() methode wordt gebruikt om tags uit te vouwen.

Syntaxis

$(kiezer).slideDown(snelheid, terugroep);

Het facultatieve argument snelheid bepaald de snelheid waarmee de tag uitvouwt. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het uitvouwen wordt uitgevoerd.

Voorbeeld:

$("#paneel").slideDown();

jQuery slideUp() methode

De jQuery slideUp() methode wordt gebruikt om tags in te vouwen.

Syntaxis

$(kiezer).slideUp(snelheid, terugroep);

Het facultatieve argument snelheid bepaald de snelheid waarmee de tag wordt ingevouwen. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het invouwen wordt uitgevoerd.

Voorbeeld:

$("#paneel").slideUp();

jQuery slideToggle() methode

De jQuery slideToggle() methode wordt gebruikt om niet zichtbare tags uit te vouwen en zichtbare tags in te vouwen.

Syntaxis

$(kiezer).slideToggle(snelheid, terugroep);

Het facultatieve argument snelheid bepaald de snelheid waarmee de tag wordt in- of uitgevouwen. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het in- of uitvouwen wordt uitgevoerd.

Voorbeeld:

$("#paneel").slideToggle();

jQuery css() methode

De css() methode vraagt of past een CSS eigenschap van de geselecteerde tags op of aan.

Een CSS eigenschap opvragen

Syntaxis

css("css-eigenschap");

Het volgende voorbeeld vraagt de CSS achtergrondkleur van de alinea-tags op:

$("p").css("background-color");

Een CSS eigenschap aanpassen

Syntaxis

css("css-eigenschap","waarde");

Het volgende voorbeeld geeft alle alinea-tags een gele achtergrondkleur:

$("p").css("background-color","yellow");

Meerdere CSS eigenschappen aanpassen

Syntaxis

css({"css-eigenschap":"waarde","css-eigenschap":"waarde",...});

Het volgende voorbeeld geeft alle alinea-tags een gele achtergrond en een dubbele lettergrootte:

$("p").css({"background-color":"yellow","font-size":"200%"}); 

Opborrelende gebeurtenissen

Bij het klikken op een tag wordt geeft de browser het klikken door aan alle bovenliggende tags. Een voorbeeld: als je klikt op een knop in een formulier klikt, wordt het onclick event niet alleen aan de knop doorgegeven, maar ook aan het formulier (form tag) waarin de knop staat en de pagina (body tag) waarin het formulier staat.

Dit stoort niet zolang er geen onclick functies gestart worden die elkaar kunnen storen.

Het opborrelen van een onclick event op een p tag naar een hogere tag kun je met de volgende JavaScript code blokkeren:

$("p").click(function(event){
  event.stopPropagation();
  ... het vervolg van de onclick functie ...
});

De functie event.stopPropagation() stopt het doorgeven van de gebeurtenis (event). Let op de variabele event die als argument met de functie wordt meegegeven.