Jquery animate div 不透明度滚动

Question

所以我正在尝试根据滚动浏览器窗口来为 css 属性设置动画。下面的代码到目前为止有效，但我希望它有一个过渡，而不是突然从 1 的不透明度捕捉到 0.5 的不透明度。任何帮助表示赞赏。提前致谢。

$(document).ready(function(){
$(window).scroll(function(){
    if ($(window).scrollTop() > 50){
        $('.header').css('background','rgba(200, 54, 54, 0.5)');
    }
    else if ($(window).scrollTop() < 50){
        $('.header').css('background','rgba(200, 54, 54, 1)');
    }
});

});

这是一个jsfiddle到目前为止的代码链接

Answer 1

你可以做到

 $(window).scroll(function(){
    if ($(window).scrollTop() > 50){
        $('.header').css('background','rgb(200, 54, 54)').stop().animate({"opacity":".5"},1000)
    }
    else if ($(window).scrollTop() < 50){
        $('.header').css('background','rgb(200, 54, 54)').stop().animate({"opacity":"1"},1000)
    }
});    

http://jsfiddle.net/XXjZW/2/