javascript jQuery：滚动时平滑动画字体大小变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19663343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: smooth animate font-size change on scroll
提问by user1374796
I have a jQuery animation function set-up to change the font size of the .header-wraptext when the document scrolls beyond 50px. This works, I'm not so keen on the solution I've got though, it's not very smooth, ideally I'd like the font-size to change smoothly as you scroll down the page, instead of having to stop scrolling the re-initiate the animation etc. It's just a bit jagged.
jsFiddle demo: http://jsfiddle.net/cXxDW/
HTML:
我有一个 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:
jQuery：
$(document).scroll(function () {
if (window.scrollY > 50) {
$(".header-wrap").stop().animate({
fontSize: '17px'
});
} else {
$(".header-wrap").stop().animate({
fontSize: '25px'
});
}
});
Any suggestions / better, smoother solutions to the one I've got are more than welcome and greatly appreciated!
对我所拥有的任何建议/更好、更流畅的解决方案都非常欢迎并非常感谢！
回答by Per Salbark
You wont get a very smooth animation of fontSize. But if you only need compatibility with modern browsers you could animate zoominstead.
你不会得到一个非常流畅的动画fontSize。但是，如果您只需要与现代浏览器兼容，则可以zoom改为使用动画。
You would have to fix your margins and positioning since those will be animated as well.
您将不得不修复您的边距和定位，因为它们也会被动画化。
Here is a proof-of-concept fiddle.
这是一个概念验证小提琴。
