Question

I detect the distance of a reader with a webcam, for that i get a value between 0 and 1. That value i map to a fontsize, in this case 13 and 25.
I want it to effect the fonth smooth over time. It the moment it does not go smooth.
And if i use the .animate then it hardly doesn’t work, i think this is because it get’s a new value for the distance every 100ms and jquery doesn’t now how to animate something that get’s changed before a animation can even finish.

var fontSize = map(distance, 0, 1, 13, 25);
$("#section_1").css({'font-size': fontSize});
//$("#section_1").animate({'font-size': fontSize});

function map(value,  istart, istop, ostart, ostop) {
     return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
}

Answer 1

If the value is changing before the animation can finish and this is leading to a concurrent call to .animate(), just call the .stop() method first. The .stop() method stops any active animations on the selected objects:

var fontSize = map(distance, 0, 1, 13, 25); 
$("#section_1").stop().animate({'font-size': fontSize});