在jQuery動畫後恢復到原始大小的元素

Question

所以我試圖讓我的頭部在用戶向下滾動頁面的某一距離後將其大小變得更小，頭部的動畫變得越來越小執行合適的時間。唯一的問題是在動畫中使頭部變大，動畫就像它應該發生的一樣，但一旦完成動畫，頭部由於某種原因恢復到其原始大小。不知道這是否有所作爲，但標題的位置設置爲固定在CSS中。我從來沒有遇到這樣的問題，所以不知道發生了什麼問題，並且使用Google搜索也沒有幫助我。

您可以查看這裏的問題：http://eventrem.com

完整的JavaScript：

function getScrollOffsets() { 

    var doc = document, w = window; 
    var x, y, docEl; 

    if (typeof w.pageYOffset === 'number') { 
     x = w.pageXOffset; 
     y = w.pageYOffset; 
    } else { 
     docEl = (doc.compatMode && doc.compatMode === 'CSS1Compat')? 
      doc.documentElement: doc.body; 
     x = docEl.scrollLeft; 
     y = docEl.scrollTop; 
    } 

    return {x:x, y:y}; 
} 

var IsHeaderBig; 

window.onload = function() { 

    var offset = getScrollOffsets(); 

    if (offset.y > 100) { 
     IsHeaderBig = false; 
     animateHeaderSmall(0); 
    } else { 
     IsHeaderBig = true; 
     animateHeaderBig(0);  
    } 

} 

window.addEventListener('scroll', function(){ 

    var offset = getScrollOffsets(); 

    if (offset.y > 100) { 

     //Make Small  
     if (IsHeaderBig) { 

      IsHeaderBig = false; 
      animateHeaderSmall(300); 
     } 

    } else { 

     //Make Big 
     if (!IsHeaderBig) { 

      IsHeaderBig = true; 
      animateHeaderBig(300); 

     } 

    } 

}); 

function animateHeaderBig(speed) { 

    var header = $("#headerContainer"); 
    var buffer = $("#homeBuffer"); 

    header.animate({ 
     height:'548px' 
    }, speed, function() {}); 

    buffer.animate({ 
     height:'470px' 
    }, speed, function() {}); 

} 

function animateHeaderSmall(speed) { 

    var header = $("#headerContainer"); 
    var buffer = $("#homeBuffer"); 

    header.animate({ 
     height:'100px' 
    }, speed, function() {}); 

    buffer.animate({ 
     height:'100px' 
    }, speed, function() {}); 


} 

Answer 1

簡單的解決方法是處理complete功能和設置的值存在。

function animateHeaderBig(speed) { 

    var header = $("#headerContainer"); 
    var buffer = $("#homeBuffer"); 

    header.animate({ 
     height:'548px' 
     }, { 
      duration: speed, 
      complete: function() { 
      $(this).css('height', '548px'); 
      } 
     }); 

    buffer.animate({ 
     height:'470px' 
     }, { 
      duration: speed, 
      complete: function() { 
          $(this).css('height', '470px'); 
      } 
     });