Question

因此，当我进一步滚动550px时，我一直在寻找动画我的标题以更改背景颜色的方法。

以下是代码：

$(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动画标头

1 个答案: