0

所以我试图基于滚动浏览器窗口来动画一个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链接

4

4 回答 4

2

你可以做 

 $(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/

于 2013-06-28T16:19:22.913 回答
1

给你的CSS过渡 - >

transition:background 1s;

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

于 2013-06-28T16:23:45.030 回答
1

您可以使用 CSS3 属性transition：

.header{
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s;
}
于 2013-06-28T16:18:50.270 回答
1

如果您想与不支持 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>
于 2013-06-28T16:29:05.563 回答