Animatie afbreken: stop()

De methode stop() kent twee optionele parameters.

Syntax: .stop([clearQueue] [, jumpToEnd])

• clearQueue (true of false)

  Indien true worden alle volgende animaties uit de sequentie gestopt.

  (Default waarde is false.)

• jumpToEnd (true of false)

  Indien true springt de momenteel lopende animatie dadelijk naar zijn eindpunt en wordt dan gestopt. Indien false loopt de momenteel lopende animatie gewoon verder en wordt op het einde pas gestopt. (Default waarde is false.)

★ Bekijk de code die bij de resetknoppen hoort.

<input class="button" type="button" id="reset1" class="resetAnim" data-id="div1" value="reset div1">
...
<script>
    $(function() {
        $('.resetAnim').click(function(){
            var deDiv = $(this).attr('data-id');    // of $(this).data('id');
            $('#' + deDiv).stop(true,true).attr('style', '');
        });
    });
</script>

De vier resetknoppen op deze pagina hebben allemaal dezelfde class .resetAnim. Elke knop heeft een attribuut data-id met als waarde de naam van de te stoppen div-tag.

Als eerste plaatsen we de waarde van data-id in de variabele deDiv. Deze waarde halen we op via de methode attr('data-id') of via data('id'). De selector op de volgende lijn is $('#' + deDiv). Voor deDiv = div1 wordt dit $('#div1').

Vervolgens plaatsen we de methode stop() op de geselecteerde div-tag. Omdat alle effecten en animaties in het DOM stijleigenschappen aan het element toevoegen, volstaat het om deze stijleigenschappen terug leeg te maken. Dit gebeurt via de methode attr('style', '').

De methodes attr() en data() wordt later nog in detail besproken, maar voorlopig is het wel nuttig om te weten wat er juist gebeurt. Heel wat methodes die later volgen, hebben twee betekenissen. Een methode attr() kan zowel een getter als een setter zijn. Voor de methode data() gebruiken we enkel de getter.

• Getter (haal de waarde van een eigenschap op).

  attr('naam').

  attr('data-naam') is identiek aan data('naam').

• Setter (geef de eigenschap een nieuwe waarde).

  attr('naam', 'waarde').

Bijvoorbeeld: lees en wijzig de tekst van de knop reset1.

• $('#reset1').attr('value') geeft als resultaat reset div1.

• $('#reset1').attr('value', 'wis animatie') wijzigt de tekst in de knop van reset div1 naar wis animatie.