javascript - 如何在文本中间显示额外的跨度

Question

我再次需要你的帮助。

我想在向下滚动时扩展文本，例如，当您向下滚动 100 像素时，“我训练”文本会变成“我喜欢火车”。

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

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

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

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

http://jsfiddle.net/HWESg/

提前感谢您的帮助，干杯!

Answer 1

一种可能性，如果您希望 trains 向右滑动并且 like 淡入。

HTML

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

Javascript

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

关于 jsFiddle