> 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/aangepaste-animaties.md).

# Aangepaste animaties

Alle voorgaande effecten hebben betrekking op het tonen/verbergen van een element. Maar wat als we andere CSS-eigenschappen willen animeren? Hiervoor gebruiken we de methode `animate()`.

Met `animate()` kan u enkel CSS-eigenschappen aanpassen die een getal bevatten. Eigenschappen die uit een string bestaan kan u niet wijzigen.\
Bijvoorbeeld: de achtergrondkleur en de achtergrondafbeelding zijn niet aanpasbaar. Er zijn echter nog twee niet-CSS-eigenschappen, namelijk `scrollTop` en `scrollLeft`.

Syntax: `.animate({properties} [, duration] [, easing] [, callback])`

* **Properties** bevat een map (of object literals) van één of meerdere eigenschappen die u wilt wijzigen.

  Zoals beschreven in hoofdstuk 2 gebruikt een object literal accolades om alle eigenschappen te groeperen en een komma als scheidingsteken.

  Bijvoorbeeld: `animate({width: '50%',left: 200},...)`
* **Duration** of tijdsduur.
* **Easing** of versnelling.
* **Callback functie** die wordt uitgevoerd na het beëindigen van de animatie.

Voor de syntax van de properties gelden speciale regels.

CSS-eigenschappen die uit één woord bestaan, kan u al dan niet tussen aanhalingstekens zetten.

* Goed: `animate({'width': '50%'})`.
* Goed: `animate({width: '50%'})`.

CSS-eigenschappen die uit twee woorden bestaan, MOET u tussen aanhalingstekens zetten of indien u het woord in *camelCase* zet (beide woorden aan elkaar schrijven, maar elk volgend woord beginnen met een hoofdletter), zijn aanhalingstekens niet verplicht.

* Goed: `animate({'border-width': '20px'})`.
* **Fout**: `animate({border-width: '20px'})`.
* Goed: `animate({'borderWidth': '20px'})`.
* Goed: `animate({borderWidth: '20px'})`.

Indien de waarde een eenheid bevat, zet deze dan steeds tussen aanhalingstekens. Indien de waarde geen eenheid bevat, mag u de aanhalingstekens weglaten. (De default eenheid is *px*.)

* Goed: `animate({'width': '50%'})`.
* **Fout**: `animate({'width':` `50%})`.
* Goed: `animate({width: '300px'})`.
* Goed: `animate({width: '300'})`.  (300 = '300px')
* Goed: `animate({width: 300})`.

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

De pagina bevat zowel simultane als sequentiële animaties.

## Simultane animaties

De eerste div-tag bevat een animatie waarbij de vier CSS-eigenschappen *width*, *left*, *opacity* en *border* gelijktijdig wijzigen.

{% hint style="success" %}
★ Bekijk de animatie die bij de knop **animate div1** hoort.\
★ Test het resultaat in een browser.
{% endhint %}

```javascript
$(function() {
    var snelheid = 2000;
    $('#anim1').click(function(){
        $('#div1').animate({ 
            width: '50%',
            left: 200,  // vervang waarde door '+=200'
            opacity: 0.25,
            borderWidth: '20px'
        }, snelheid);
    });
});
```

![imultane animaties](/files/-L9sGk_b2aLf2p5I38SJ)

{% hint style="success" %}
★ Vervang de waarde van **left : 200** door **left : '+=200'**.\
(Vergeet de komma op het einde niet!)\
★ Test het resultaat in een browser.
{% endhint %}

De waarde ***+=200*** staat voor ***waarde = waarde + 200***. Telkens u op de knop drukt, start de animatie opnieuw en wordt het blok 200 pixels naar rechts geschoven. Na een aantal kliks schuift het blok zelfs volledig buiten het beeld.

## Sequentiële animaties

Een sequentiële animatie wordt opgebouwd door een reeks enkelvoudige animaties achter elkaar te plaatsen. Hiervoor gebruiken we zoals steeds de punt-notatie. U kan de methode `animate()` gebruiken, maar ook alle reeds besproken effecten kan je aan de ketting toevoegen.

Bijvoorbeeld: `$('#div2').animate(...).slideUp(...).animate(...)`.

{% hint style="success" %}
★ Bekijk de animatie die bij de knop **animate div2** hoort.\
★ Test het resultaat in een browser.
{% endhint %}

```javascript
$(function() {
    var snelheid = 2000;
    $('#anim2').click(function(){
        $('#div2').animate({ 
            width: '50%'
        }, snelheid).animate({ 
            left: 200
        }, snelheid).animate({ 
            opacity: .25
        }, snelheid).slideUp(snelheid);
    });
});
```

## Simultane + sequentiële animaties

In voorgaand voorbeeld bevatte `animate()` telkens één eigenschap. Zo ontstond een volledig sequentiële animatie. Door meerdere eigenschappen te combineren, kan u makkelijk een combinatie van sequentiële en simultane animaties bouwen.

{% hint style="success" %}
★ Bekijk de animatie die bij de knop **animate div3** hoort.\
★ Test het resultaat in een browser.
{% endhint %}

```javascript
$(function() {
    var snelheid = 2000;
    $('#anim3').click(function(){
        $('#div3').animate({ 
            width: '50%',
            left: 200,
            opacity: 0.25
        }, snelheid).slideUp(snelheid);
    });
});
```

Eerst worden de eigenschappen *width*, *left* en *opacity* simultaan gewijzigd. Op het einde van deze cyclus komt het slide-effect in actie.