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的動畫。

您將不得不修復您的利潤率和定位，因爲這些也將動畫。

這是proof-of-concept fiddle。