jQuery：滾動時平滑動畫字體大小更改

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設置動畫。

你必須修復你的邊距和定位，因為那些也會被動畫化。

這是一個概念驗證小提琴 。