在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'); 
      } 
     });