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

How to show additional span in the middle of text

本文关键字：显示 文本 中间      更新时间：2023-09-26

我再次需要你的帮助。

我想在向下滚动时扩展文本，例如，当你向下滚动100像素时，"I trains"文本变成了"I like trains"。

我把它们都放在h1和"like"文本放在span。

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

我试着给span display:none，然后用jQuery的fadeIn动画，但这不是我想要达到的效果。它只是作为一个元素消失了，当它显示的时候，旁边的文字只是跳到左边和右边，但我想让它动画。

我也尝试了"不透明度"，但在两侧的文字之间有一个空间，检查提琴。我想要实现的是让h1滑动到两边，然后显示span，隐藏span，然后将其余部分滑动到中间。

http://jsfiddle.net/HWESg/

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

如果你想让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

相关文章：