jquery动画文本颜色不透明度

Question

我刚开始在一个网站上工作，并决定使用 jquery 的动画功能将页眉向下滑动。当它向下滑动时，会显示带有文本的 div。文本显示为灰色而不是黑色。我尝试过使用css，但没有运气。

谁能帮助并解释我需要做什么？我知道这与不透明度有关。

我想在不受其不透明度影响的标题 div 上显示一个 div。

index.php:

<center><div class="table"  id="header">
  <div class="row" id="body">grey</div>
</div></center>

Main.css：

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, form, table, tr, td {margin:0; padding:0; border:0; vertical-align:baseline; text-align:center;}
html, body {background-color:#EEEEEE;}
#header {min-width:80%; background-color:white;}
.table {display: table;}
.row {display: table-row;}
.cell {display: table-cell;}

index.css：

#header {height:500px; background:grey;}

index.js：

$(document).ready(function() {
$("#header").hide();
$("#body").hide();

$( "#header" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
  $("#body").show();
});

});

Answer 1

尝试将opacity: 0.25改为opacity: 1.0

这里是一个例子：http://jsfiddle.net/maximgladkov/TRqaZ/

HTML

<div id="container">
    <div id="background"></div>
    <div id="text">Sample text</div>
</div>

CSS

#container {
    position: relative;
}

#background {
    background: grey;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#text {
    opacity: 0;
    position: relative;
}

JS

$(document).ready(function() {
    $('#text').animate({
        opacity: 1.0
    }, 5000);
});