Question

我有一个jQuery动画功能设置，当文档滚动超过50px时，可以更改.header-wrap文本的字体大小。这是有效的，我不是那么热衷于我已经得到的解决方案，它不是很顺利，理想情况下我希望在向下滚动页面时平滑地改变字体大小，而不是必须停止滚动 - 启动动画等等。它只是有点锯齿状。
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设置动画。

你必须修复你的边距和定位，因为那些也会被动画化。

这是proof-of-concept fiddle。

jQuery：滚动时平滑动画字体大小更改

1 个答案: