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.

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

★ Open animaties/versnellingsfunctie.html. ★ Bekijk de animaties en test het resultaat in een browser.

<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.