> 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 %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAOrWtzkpX73u2_uCiR%2F-L9sGgr4VdISER2orvQf%2Fshow.png?generation=1524073654453089\&alt=media)

```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 %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAOrWtzkpX73u2_uCiR%2F-L9sGhuG0DEt39wB4Yr2%2FslideUp.png?generation=1524073654527504\&alt=media)

```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 %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAOrWtzkpX73u2_uCiR%2F-L9sGiK0xUH_9l_gILdl%2FfadeIn.png?generation=1524073654582423\&alt=media)

```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 %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAOrWtzkpX73u2_uCiR%2F-L9sGivAhx4YkC-7edLO%2FfadeTo.png?generation=1524073654497001\&alt=media)

```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);
    });
});
```