元素在 JQuery 动画后恢复为原始大小

Elements reverting back to original sizes after JQuery animation

本文关键字：原始 恢复 JQuery 动画 元素      更新时间：2023-09-26

所以我试图让我的标题在用户向下滚动页面一定距离后将其大小更改为更小，标题的动画在正确的时间执行越来越大。唯一的问题是动画使标题更大，动画按预期发生，但是一旦完成动画，由于某种原因，标题就会恢复到其原始大小。不确定这是否有任何区别，但标头在 css 中的位置设置为固定。我从未遇到过这样的问题，所以不知道出了什么问题，谷歌搜索它也没有帮助我。

您可以在此处查看问题：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() {});

}

简单的解决方案是处理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');
          }
       });
相关文章：