# Versnellingsparameter

De versnelling of Easing-parameter bepaalt volgens welke curve de animatie verloopt. jQuery kent maar twee versnellingsparameters: `linear` en `swing` (de default waarde). Onderstaande grafieken tonen het snelheidsverloop in functie van de tijd.

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

Indien u de easing-plugin installeert, kan u nog tientallen extra versnellingsparameters gebruiken. Info en download: <http://gsgd.co.uk/sandbox/jquery/easing/>

{% hint style="success" %}
★ Open **animaties/versnellingsfunctie.html**.\
★ Bekijk de animaties en test het resultaat in een browser.
{% endhint %}

```markup
<div class="select">
    <select id="easing">
        <optgroup label="jQuery Core">
            <option value="linear">linear</option>
            <option value="swing">swing</option>
        </optgroup>
        <optgroup label="jQuery easing plugin">
            <option value="easeInOutBounce">easeInOutBounce</option>
            <option value="easeInOutQuart">easeInOutQuart</option>
            <option value="easeInOutCubic">easeInOutCubic</option>
            <option value="easeInOutQuint">easeInOutQuint</option>
            <option value="easeInOutSine">easeInOutSine</option>
            <option value="easeInOutExpo">easeInOutExpo</option>
            <option value="easeInOutCirc">easeInOutCirc</option>
            <option value="easeInOutElastic">easeInOutElastic</option>
            <option value="easeInOutBack">easeInOutBack</option>
        </optgroup>
    </select>
    <i class="fa fa-angle-down fa-2"></i>
</div>
...
<h3>Easing effect = <span id="effect">...</span></h3>
...
<script src="../js/jquery.easing.1.3.js"></script>
<script>
    $(function() {
        var hoogte = $('#div1').height(); 
        var snelheid = 1000;
        $('#easing').change(function(){ 
            var easing = $(this).val();
            $('#effect').text(easing);
            $('#div1').animate({height:120}, snelheid, easing)
                .delay(300)
                .animate({height:hoogte}, snelheid, easing);
        }); 
    });
</script>
```

De eerste lijn linkt naar de easing-plugin zodat we de nieuwe versnellingsparameters kunnen gebruiken in onze animaties.

Het script bevat drie variabelen. In de variabele hoogte plaatsen we de werkelijke hoogte van de *#div1*. Dit gebeurt met de getter-functie `height()`. Als we eventueel later de inhoud van *#div1* aanpassen, wordt ook de werkelijke hoogte van *#div1* automatisch herrekend.

In de variabele *easing* bewaren we de versnellingsparameter. Telkens we een andere waarde uit de lijst met ID *easing* selecteren, wordt deze waarde uitgelezen en in de variabele *easing* bewaard. De gekozen waarde wordt ook zichtbaar op de pagina. `$('#effect').text(easing)` plaatst de waarde als tekst binnen de span-tag *effect*.

Nu de animatie zelf.\
`$('#div1').animate({height:100}, snelheid, easing)` maakt *#div1* 120 pixels hoog. De verplaatsing gebeurt volgens de gekozen versnelling. Vervolgens wachten we 0,3 seconden `delay(300)` om daarna terug naar de originele hoogte te animeren via `animate({height:hoogte}, snelheid, easing);`

De easing-plugin bevat meer versnellingsparameters dan deze in de keuzelijst. Indien u de jQuery-UI-plugin gebruikt, hoeft u de easing-plugin niet meer apart te linken. De volledige easing-plugin zit namelijk geïntegreerd in de jQuery-UI-plugin.