javascript - jQuery：滚动时平滑动画字体大小变化

Question

我有一个 jQuery 动画功能设置来.header-wrap在文档滚动超过 50 像素时更改文本的字体大小。这行得通，但我对我得到的解决方案不太感兴趣，它不是很流畅，理想情况下，我希望字体大小在您向下滚动页面时平滑更改，而不必停止滚动重新- 启动动画等。它只是有点锯齿状。
jsFiddle 演示：http: //jsfiddle.net/cXxDW/
HTML：

<div class="content-wrap"></div>
<div class="header-wrap">hello
    <br/>hello
    <br/>hello
    <br/>
</div>

jQuery：

$(document).scroll(function () {
    if (window.scrollY > 50) {
        $(".header-wrap").stop().animate({
            fontSize: '17px'
        });
    } else {
        $(".header-wrap").stop().animate({
            fontSize: '25px'
        });
    }
});

任何建议/更好、更顺畅的解决方案都非常受欢迎，非常感谢！

Answer 1

你不会得到一个非常流畅的动画fontSize。但是，如果您只需要与现代浏览器兼容，则可以zoom改为动画。

您将不得不修复您的边距和定位，因为它们也会被动画化。

这是一个概念验证小提琴。