Javascript 让这条扫描线变硬。很难在div中扫描多行

工作小提琴在这里：

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

---

如何在整个边框上打断动画，以扫描每一行。我尝试在上面的函数中加入动画->回调递归，每次调用将掩码降低一个真实高度，但得到了不可预测/混乱的行为

如果您只需要循环，那么它应该是这样的（在

运行\u scan

内部）

var i=0；
函数循环（）{
如果（++i<行）{
$（遮罩）。设置动画({
“左”：原点\左+$（掩码）.width（）
},{
持续时间：持续时间，
完成：循环
});
}否则{
//最后一行
回调（）；
}
}

谢谢你的好心人，他支持尼斯编码：）如果有断线，你可以检查一下。或者您可以尝试使用jQuery将每一行放在

标记之间？这样你就不必编辑扫描功能了。你需要有两个遮罩，一个带边框，一个用于线条，另一个用于需要隐藏的线条，遮罩的高度必须是一条线条的大小。您将需要在循环中运行动画以获得行数，第一行完成后运行下一行。@Brainfeeder我喜欢您的建议。好主意@是的！你明白。我目前正在尝试解决如何运行此线循环动画模式。

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