jQuery.animate滾動問題

Question

當滾動超過視口高度時，我無法為字體設置動畫。 它可以動畫一次，但不能再次回來。

這有效，它只是來回更改字體大小：

if ($(this).scrollTop() > $( window ).height()) {
               $('.nav li a').css({"font-size":"2vw"});
            } else {
               $('.nav li a').css({"font-size":"1.2vw"});
            }

但這不是，它只設置一次動畫，然后在它應該動畫返回時開始滯后並跳轉：

            if ($(this).scrollTop() > $( window ).height()) {
               $('.nav li a').animate({"font-size":"2vw"});
            } else {
               $('.nav li a').animate({"font-size":"1.2vw"});
            }

有人知道為什么嗎？ 謝謝！

Answer 1

是否需要在jQuery中設置動畫？ 您可以通過CSS3過渡獲得效果（除非您嘗試支持舊版瀏覽器）：

transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;

或僅字體：

transition: font 0.3s ease;
-webkit-transition: font 0.3s ease;
-moz-transition: font 0.3s ease;
-o-transition: font 0.3s ease;
-ms-transition: font 0.3s ease;

然后，您可以使用.css（）方法更改字體大小，然后CSS過渡將處理動畫。

Answer 2

以防萬一問題是您多次調用動畫，您可以嘗試執行以下操作（未經測試的代碼，抱歉，我現在無法嘗試）：

var newState=$(this).scrollTop() > $( window ).height();


function updateOnScroll(e) {

    var oldState=newState;

    newState=$(this).scrollTop() > $( window ).height();

    if(oldState!=newState) {
        if(newState) {
            $('.nav li a').animate({"font-size":"100vw"});
        } else {
            $('.nav li a').animate({"font-size":"1.2vw"});
        }
     }
}

只是個主意...