Make this retrocomputer scanning rock. Scanning multiple lines in a div is hard

Question

A working fiddle will be here: http://jsfiddle.net/WyXLB/1/

When an HTML element contains several lines of text, I want to crawl them. I am currently viewing the bounding box of the entire element.

Some code:

function run_scan(el,mask,callback) { // we need to go over each line of text in here // or somewhere var el_font_size = $(el).css('font'); $('body').append(sizer); sizer.css({ 'position': 'absolute', 'font' : el_font_size, 'white-space' : 'pre' } ); var real_box = window.getComputedStyle(sizer[0]); var real_width = parseFloat(real_box.width); var real_height = parseFloat(real_box.height); var lines = Math.round($(el).height()/real_height); var mask_offset = $(mask).offset(); var origin_left = mask_offset.left; var duration = parseFloat($(mask).width())/2.0; $(mask).animate( { 'left':origin_left+$(mask).width() }, { duration:duration, complete:callback } ); } 

How can I split the animation over the entire bounding box to check each line. I tried translating the animation callback recursion into the function above by lowering the mask by one call to real_height, but got unpredictable / chaotic behavior.

Answer 1

If you only need a loop, it should look like this (inside run_scan )

  var i = 0; function loop() { if (++i < lines) { $(mask).animate({ 'left':origin_left+$(mask).width() },{ duration:duration, complete:loop }); } else { // last line callback(); } }