jquery - 无法使用 jQuery 为标题设置动画

Question

因此，我一直在广泛寻找使标题动画化的方法，以便在我进一步滚动超过 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;
}

脚本:

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

检查一下 here .