JQuery滚动动画颜色

我在我的网站上有一个固定的位置标题，它在页面顶部有一个alpha透明度。当用户滚动浏览页面顶部时，它会以纯色动画。但是，当用户滚动回页面顶部时，我希望颜色返回到Alpha透明度。不幸的是，从我读过的JQuery颜色动画不支持RGBA值。当用户向下滚动时，颜色会发生变化，但是当它位于页面顶部时，我无法变成颜色。JQuery滚动动画颜色

<script type="text/javascript"> 
    $(window).scroll(function() { 
     $("#header").css("position", "fixed"); 
     if ($(window).scrollTop() > 0) { 
      $("header").animate({backgroundColor:'#2b2b2b'}, 'slow'); 
     } 
     if ($(window).scrollTop() <= 0) { 
      $("header").animate({backgroundColor: '#000000'}, 'slow'); 
     } 
    }); 
</script>

有关如何做到这一点的任何想法？

来源

2013-03-06 bdjett

你确定它的'$（ “头”）'和'不是$（ “＃头”）'？ – 2013-03-06 22:00:06

是的，我有一个HTML5头标记包裹在一个ID为#header的div div令人困惑。 – bdjett 2013-03-06 22:02:57

实际上，jQuery的动画不支持动画背景颜色（请参阅我对roXor的回答的评论）。您需要额外的库来为背景颜色添加动画。 – Shauna 2013-03-06 22:53:53

使用CSS3 transition使用jQuery：

您可以附加一个CSS3过渡到header到自定义类，您可以设置所需的颜色。
比使用jQuery你只需要添加/删除类：

LIVE DEMO

$(window).scroll(function() { 
    var addRemClass = $(window).scrollTop() > 0 ? 'addClass' : 'removeClass'; 
    $("header")[addRemClass]('bgChange'); 
});

CSS：

header{ 
    background:#000; 
    padding:20px; 
    color:#fff; 
    width:100%; 
    transition:0.8s; /* Our nice transition (you can also use 'ms' values) */ 
} 

header.bgChange{ 
    background:#2b2b2b;/* I used #f00 in the demo to make it more obvious :) */ 
}

解决方案使用jQuery用户界面： 为了支持更多的浏览器不喜欢：

LIVE DEMO

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
<script> 
    $(window).scroll(function() { 
     $("header").stop().animate({ 
      backgroundColor: $(window).scrollTop() > 0 ? '#2b2b2b' : '#000' 
     }, 800); 
    }); 
</script>

来源

2013-03-06 21:55:59

我无法使用fadeTo（），因为我不希望标题上的文字变淡。 – bdjett 2013-03-06 22:06:38

@ bjett92编辑我的回答 – 2013-03-06 22:11:24

注 - jQuery不支持默认背景颜色的动画。你需要一个额外的库（jUI或者Color插件）来仅仅使用jQuery（并且没有支持几个漏洞的CSS3）来完成它，以防你想要走这条路线。 http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor – Shauna 2013-03-06 22:16:16

JQuery滚动动画颜色

回答

相关问题