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.

★ Open animatie/basisEffecten.html en bekijk de broncode. ★ Test de pagina in een browser.

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.

★ Bekijk de effecten die bij de links van div1 horen. ★ Test het resultaat in een browser.

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

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

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

$('#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').

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

★ Bekijk de effecten die bij de links van div2 horen. ★ Test het resultaat in een browser.

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

★ Bekijk de effecten die bij de links van div3 horen. ★ Test het resultaat in een browser.

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

★ Bekijk de effecten die bij de links van div4 horen. ★ Test het resultaat in een browser.

$(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);
    });
});