Javascript 如何在文本中间显示附加跨度

我再次需要你的帮助

我想在向下滚动时扩展文本，例如，当你向下滚动100px时，“I trains”文本进入“I like trains”

我把它全部放在h1中，“like”文本放在span中

<h1>I <span>like</span> trains</h1>

我喜欢火车

我试着给出span display:none，然后用jQuery的fadeIn设置动画，但这不是我想要达到的效果。它只是作为一个元素消失，当它显示时，两侧的文本只是向左和向右跳跃，但我想给它设置动画

我也尝试了“不透明”，但在两侧的文本之间有一个空格，请选中fiddle。我想要实现的是让h1滑动到两侧，然后显示跨度，隐藏跨度，然后将其余部分滑动到中间

---

提前感谢您的帮助，干杯

如果您希望

列车

向右滑动，并

像

一样淡入，则可能会出现这种情况

HTML

---

在

上，改用“最大宽度”：谢谢，这就成功了。

<h1>I<span class="display"> like</span> trains</h1>

var display = $('.display');

display.css({
    visibility: "hidden",
    fontSize: "0"
}).animate({
    fontSize: display.parent().css("fontSize")
}, 500, "linear", function () {
    $(this).css({
        opacity: "0",
        visibility: "visible"
    }).animate({
        opacity: "1"
    }, 500, "linear");
});