Jquery 在创建时使用已创建的html元素从左到右填充文本颜色

嗨，伙计们，我需要一点帮助，我完全糊涂了。我有JS脚本，它在特定时间高亮显示一行文本，并将类更改为高亮显示。我想做的是从左到右添加一个文本填充/颜色文本更改效果，我试图从这里实现它

不知道我在将类更改为高亮显示时做错了什么，它应该开始动画化。 以下是文件和代码

突出显示的css原始规则

body .content .test > div.highlighted {
  color: #fff;
  font-size: 48px;

}

js生成高亮显示的div元素

function generate() {
   var html = "";
   for(var i = 0; i < _data["test"].length; i++) {
      html += "<div";
      if(i == 0) {
         html+=` class="highlighted"`;
         currentLine = 0;
      }
      if(_data["test"][i]["note"]) {
         html += ` note="${_data["test"][i]["note"]}"`;
      }
      html += ">";
      html += _data["test"][i]["line"] == "" ? "•" : _data["test"][i]["line"];
      html += "</div>"
   }
   $(".test").html(html);
   align();
}

函数生成（）{
var html=“”；
对于（变量i=0；i<_数据[“测试”]。长度；i++）{
html+=“”；
html+=_数据[“测试”][i][“行”]==“？”•：_数据[“测试”][i][“行”]；
html+=“”
}
$（“.test”）.html（html）；
align（）；
}

以及从js生成的html

<div class="highlighted">Lorem ipsum donna wetta</div>

Lorem ipsum donna wetta

可能需要一些帮助真的不知道我一直做错了什么应该很简单，但不是。

---

谢谢

包括htmlplease@Scaramouche插入html