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/

Answer 2

您可以使用CSS3属性transition：

.header{
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s;
}

Answer 3

给你的css过渡 - ＆gt;

transition:background 1s;

http://jsfiddle.net/XXjZW/6/

Answer 4

如果你想要兼容不支持CSS3的浏览器，我建议你使用jQuery UI库：

  $('.header').animate({
      backgroundColor: "#aa0000"
  }, 1000);

活生生的例子：http://jsfiddle.net/XXjZW/8/

在包含jQuery库时需要包含它：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

Jquery在滚动上设置div不透明度

4 个答案: