无法使用 jQuery 为 header 设置动画

Question

所以我一直在广泛寻找方法来为我的 header 设置动画，以便在我进一步滚动超过 550 像素时更改背景颜色。

代码如下：

$(function(){
$('header').data('size','big');
});

$(window).scroll(function(){
var $header = $('header');
if ($('body').scrollTop() > 550) {
    if ($header.data('size') == 'big') {
        $header.data('size','small').stop().animate({
            'background','#444349'
            }, 'slow');
    }
} else {
    if ($header.data('size') == 'small') {
        $header.data('size','big').stop().animate({
            'background','transparent'
        }, 'slow');
    }  
}
});

Answer 1

为什么不使用 CSS 为页眉设置动画？

CSS:

header {
    background: transparent;
    transition: background .6s; /* 'slow' is 600ms */
}

header.foobar {
    background: #444349;
}

JavaScript:

$(window).scroll(function(){
    if($('body').scrollTop() > 550){
        $('header').addClass('foobar');
    }else{
        $('header').removeClass('foobar');
    }
});

看看here。

无法使用 jQuery 为 header 设置动画

Can't animate header with jQuery

jquery

css

jquery-animate