> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/7-animaties-en-effecten/basiseffecten.md).

# Basiseffecten

Alle effecten die we hier bespreken, gebruiken tot drie optionele parameters. Neem bijvoorbeeld `hide()`. Dit effect verbergt het geselecteerde element. Syntax: `hide([duration] [, easing] [, callback])`

* **Duration of tijdsduur.**\
  Dit is de tijdspanne waarover de animatie loopt. U kan de tijd opgeven in milliseconden of met de strings `slow` , `normal` of `fast` (respectievelijk *600* ms, *400* ms en *200* ms).
* **Easing of versnelling.**\
  jQuery kent twee optionele versnellingsparameters: `linear` en `swing` (de default waarde). Via plugin’s zijn extra versnellingsparameters beschikbaar. Hierover later meer.
* **Callback:**\
  Deze functie wordt uitgevoerd zodra de animatie volledig is afgerond.

{% hint style="success" %}
★ Open **animatie/basisEffecten.html** en bekijk de broncode.\
★ Test de pagina in een browser.
{% endhint %}

Deze pagina bevat enkele div-tags. Het click-event op de verschillende knoppen activeert een animatie.

## Show(), hide() en toggle()

Deze effecten passen tijdens de animatie de CSS-eigenschappen *height*, *width* en *opacity* aan. Aan het einde van de animatie wordt voor `hide()` de eigenschap `display:none` toegevoegd. Op het einde van `show()` komt de display-eigenschap terug naar de initiële toestand. Voor blocklevel elementen zoals een div-tag of een h1-tag is de initiële toestand `display:block`. Voor inline elementen zoals een span-tag of een strong-tag is de initiële toestand `display:inline`.

{% hint style="success" %}
★ Bekijk de effecten die bij de links van `div1` horen.\
★ Test het resultaat in een browser.
{% endhint %}

![](/files/-L9sGgr4VdISER2orvQf)

```javascript
$(function() {
    var snelheid = 1000;
    // animatie op div1
    $('#verbergDiv1').click(function(){
        $('#div1').hide(snelheid);
    });
    $('#toonDiv1').click(function(){
        $('#div1').show(snelheid);
    });
    ...
});
```

De animatiesnelheid kan u aanpassen met de variabele snelheid. Initieel staat snelheid ingesteld op *1000* (1000 ms of 1 sec). Als snelheidswaarde kan u een getal ingeven of de strings `slow`, `normal` en `fast`. De twee eerste knoppen maken *#div1* respectievelijk onzichtbaar en zichtbaar.

```javascript
$(function() {
    var snelheid = 1000;
    ...
    $('#toggleDiv1').click(function(){
        $('#div1').toggle(snelheid);
    });
    ...
});
```

Met de methode `toggle()` kan u de vorige toestand omkeren. Zichtbaar wordt onzichtbaar en omgekeerd. Telkens u op de knop *#toggleDiv1* klinkt, wijzigt de toestand. (Zie ook paragraaf 6.5.)

```javascript
$(function() {
    var snelheid = 1000;
    ...
    $('#toggleDiv1Callback').click(function(){
        $('#div1').toggle(snelheid, function(){ 
            if ($('#div1').is(':visible')) {
                alert('Div1 is zichtbaar');
            } else {
                alert('Div1 is onzichtbaar');
            }
        });
    });
});
```

De vierde knop activeert het toggle-effect, voorzien van een callback functie. De if-voorwaarde geeft als waarde `true` of `false`. Afhankelijk van deze waarde wordt de bijbehorende tekst getoond.

{% hint style="danger" %}
`$('#div1).is(':visible')` is niet hetzelfde als `$('#div1:visible')`.\
`$('#div1:visible')` is een selector en bevat dan enkel het object, en niet de waarde `true` of `false`. Het resultaat van het if-else-statement is bijgevolg altijd `false` en de boodschap is dus `alert('Div1 is onzichtbaar')`.
{% endhint %}

## SlideUp(), slideDown() en slideToggle()

Ook deze effecten tonen/verbergen het element, maar nu met een schuifeffect.

Deze methodes passen enkel de CSS-eigenschap height aan om uiteindelijk te eindigen met de eigenschap `display:none` voor `slideUp()` en `display:block` of `display:inline` voor `slideDown()`.

{% hint style="success" %}
★ Bekijk de effecten die bij de links van div2 horen.\
★ Test het resultaat in een browser.
{% endhint %}

![](/files/-L9sGhuG0DEt39wB4Yr2)

```javascript
$(function() {
    var snelheid = 1000;
    $('#verbergDiv2').click(function(){
        $('#div2').slideUp(snelheid);
    });
    $('#toonDiv2').click(function(){
        $('#div2').slideDown(snelheid);
    });
    $('#toggleDiv2').click(function(){
        $('#div2').slideToggle(snelheid);
    });
    $('#toggleDiv2Callback').click(function(){
        $('#div2').slideToggle(snelheid, function(){ 
            if ($('#div2').is(':visible')) {
                alert('Div2 is zichtbaar');
            } else {
                alert('Div2 is onzichtbaar');
            }     
        });
    });
});
```

## FadeIn(), fadeOut() en fadeToggle()

Ook deze methodes tonen/verbergen het element, maar nu met een vervagingseffect.

Deze methodes passen enkel de CSS-eigenschap `opacity` aan om uiteindelijk te eindigen met de eigenschap `display:none` voor `fadeOut()` en `display:block` of `display:inline` voor `fadeIn()`.

{% hint style="success" %}
★ Bekijk de effecten die bij de links van div3 horen.\
★ Test het resultaat in een browser.
{% endhint %}

![](/files/-L9sGiK0xUH_9l_gILdl)

```javascript
$(function() {
    var snelheid = 1000;
    $('#verbergDiv3').click(function(){
        $('#div3').fadeIn(snelheid);
    });
    $('#toonDiv3').click(function(){
        $('#div3').fadeOut(snelheid);
    });
    $('#toggleDiv3').click(function(){
        $('#div3').fadeToggle(snelheid);
    });
    $('#toggleDiv3Callback').click(function(){
        $('#div3').fadeToggle(snelheid, function(){ 
            if ($('#div3').is(':visible')) {
                alert('Div3 is zichtbaar');
            } else {
                alert('Div3 is onzichtbaar');
            }     
        });
    });
});
```

## FadeTo()

Bij alle voorgaande methodes verdwijnt de div-tag volledig van het scherm. De vrijgekomen plaats wordt ingenomen door de onderliggende elementen of, met andere woorden, aan de div-tag wordt de CSS-eigenschap `display:none` toegevoegd.

De methode `fadeTo()` gebruikt de CSS-eigenschap visibility (`hidden` of `visible`). Ook hiermee kan u de div-tag laten verdwijnen, maar de plaats wordt niet vrijgegeven. De onderliggende elementen schuiven dus niet naar boven.

De syntax van `fadeTo()` is ook iets anders dan de voorgaande:

`.fadeTo( duration, opacity [, easing] [, callback] )`

De parameters `duration` en `opacity` zijn verplicht. De `opacity` of dekking is een getal tussen *0* (onzichtbaar) en *1* (zichtbaar).

{% hint style="success" %}
★ Bekijk de effecten die bij de links van div4 horen.\
★ Test het resultaat in een browser.
{% endhint %}

![](/files/-L9sGivAhx4YkC-7edLO)

```javascript
$(function() {
    var snelheid = 1000;
    $('#fadeDiv4_50').click(function(){
        $('#div4').fadeTo(snelheid, .5);
    });
    $('#fadeDiv4_0').click(function(){
        $('#div4').fadeTo(snelheid, 0);
    });
    $('#fadeDiv4_100').click(function(){
        $('#div4').fadeTo(snelheid, 1);
    });
});
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://1itf.gitbook.io/jquery/7-animaties-en-effecten/basiseffecten.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.