Question

所以我试图让我的标题在用户向下滚动页面一定距离后将其大小更改为更小，标题的动画在更合适的时间执行越来越大。只有问题在动画上才能使标题更大，动画应该按原样发生，但是一旦完成动画，标题由于某种原因恢复到原始大小。不确定这是否有任何区别但是标题的位置设置为在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() {});


}

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

在JQuery动画之后，元素恢复到原始大小

1 个答案: