Javascript 当我替换时，jQuery会中断<；字体>；带有更多标签<；span>'；s

我从借用的代码（from/）中获得了一个时髦的jQuery交叉褪色文本旋转木马，并通过外部php动态生成的html提供格式化文本。这正是我需要的效果

问题是，它工作得很好。。。但是，如果我使用大量的

标记来获得所需的格式（每个单词有几种颜色），那么只有才可以。我反复读到，我必须不要使用

，因为它已被弃用，因此会让婴儿哭泣或做其他事情

---

工作MCVE：

$（“#caption”）.css（“宽度”，$（“#caption>span:first child”）.width（）；
$（“#caption”）.css（“高度”，$（“#caption>span:first child”）.height（）；
var captionIdx=0；
var captionItemCount=$（“#caption>span”）.length；
setInterval（函数（）{
$（“#标题span:eq（“+captionIdx+”）。淡出（“慢”）；
captionIdx=（captionIdx+1）%captionItemCount；
var$next=$（“#标题span:eq（“+captionIdx+”））；
$（“#caption”）.css（“width”，$next.width（））；
$（“#caption”）.css（“height”，$next.height（））；
$next.fadeIn（“慢”）；
}, 2000);
#容器{
文本对齐：居中；
显示：块；
}
#标题{
填充：0px；
显示：内联块；
位置：相对位置；
垂直对齐：底部对齐；
-webkit过渡：宽度0.25s线性；
-moz过渡：宽度0.25s线性；
-ms过渡：宽度0.25s线性；
-o型过渡：宽度0.25s线性；
过渡：宽度0.25s线性；
}
#标题>跨度{
显示：无；
位置：绝对位置；
顶部：0px；
左：0px；
}
#标题>跨度：第一个孩子{
显示：内联块；
}

这项任务非常重要

$（“#caption”）.css（“宽度”，$（“#caption>span:first child”）.width（）；
$（“#caption”）.css（“高度”，$（“#caption>span:first child”）.height（）；
var captionIdx=0；
var captionItemCount=$（“#caption>span”）.length；
setInterval（函数（）{
$（“#caption>span:eq（“+captionIdx+”）。淡出（“慢”）；
captionIdx=（captionIdx+1）%captionItemCount；
var$next=$（“#caption>span:eq（“+captionIdx+”））；
$（“#caption”）.css（“width”，$next.width（））；
$（“#caption”）.css（“height”，$next.height（））；
$next.fadeIn（“慢”）；
}, 2000);
.w1{color:#FF0000；}
.w2{颜色：#00FF00；}
.w3{color:#0000FF；}
#容器{
文本对齐：居中；
显示：块；
}
#标题{
填充：0px；
显示：内联块；
位置：相对位置；
垂直对齐：底部对齐；
-webkit过渡：宽度0.25s线性；
-moz过渡：宽度0.25s线性；
-ms过渡：宽度0.25s线性；
-o型过渡：宽度0.25s线性；
过渡：宽度1s线性；
}
#标题>跨度{
显示：无；
位置：绝对位置；
顶部：0px；
左：0px；
}
#标题>跨度：第一个孩子{
显示：内联块；
}

这项任务非常重要
当我预测这可能是一个“快速修复”时，我没想到修复会是一个字符。。。太棒了，谢谢！（同时，想想我因为一个角色浪费了多少时间，也很沮丧！）