Jquery在滚动上动画div不透明度答案

【问题标题】：Jquery animate div opacity on scrollJquery在滚动上动画div不透明度
【发布时间】：2013-06-26 11:50:04
【问题描述】：

所以我正在尝试基于滚动浏览器窗口来为 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 到目前为止的代码链接

【问题讨论】：

标签： jquery css jquery-animate opacity

【解决方案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/

【讨论】：

谢谢。这段代码和下面的例子很好用，但它给我带来了另一个问题。如何通过影响标题 div 内的 h1 标签来设置背景不透明度的动画？

【解决方案2】：

你可以使用CSS3属性transition：

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

【讨论】：

【解决方案3】：

给你的 css 过渡 ->

transition:background 1s;

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

【讨论】：

【解决方案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>

【讨论】：