Question

我再次需要你的帮助。

我希望在向下滚动时扩展文本，例如，当您向下滚动100px时，“I train”文本进入“我喜欢火车”。

我把它全部放在h1中，而“喜欢”的文字放在span中。

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

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

我也尝试了“不透明度”，但两边的文字之间有一个空格，请检查小提琴。我想要实现的是让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

上

如何在文本中间显示其他跨度

1 个答案: