Сделайте эту ретрокомпьютерную сканлайн-рок. Сканирование нескольких строк в div сложно

Question

Рабочая скрипка будет здесь: http://jsfiddle.net/WyXLB/1/

Когда элемент HTML содержит несколько строк текста, я хочу просмотреть каждую. В данный момент я просто сканирую ограничивающий прямоугольник всего элемента.

Некоторый код:

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

Как я могу разбить анимацию по всему ограничивающему прямоугольнику, чтобы сканировать каждую строку. Я попытался поместить в вышеупомянутую функцию анимацию-> обратного вызова, понижая маску на одну real_height при каждом вызове, но получая непредсказуемое / хаотическое поведение.

Answer 1

Если вам нужен только цикл, то он должен выглядеть так (внутри 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();
        }
    }