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

★ Open animatie/aangepasteAnimaties.html. ★ Bekijk de broncode en test de pagina in een browser.

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.

★ Bekijk de animatie die bij de knop animate div1 hoort. ★ Test het resultaat in een browser.

$(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

★ Vervang de waarde van left : 200 door left : '+=200'. (Vergeet de komma op het einde niet!) ★ Test het resultaat in een browser.

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

★ Bekijk de animatie die bij de knop animate div2 hoort. ★ Test het resultaat in een browser.

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

★ Bekijk de animatie die bij de knop animate div3 hoort. ★ Test het resultaat in een browser.

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