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/maximglad​​kov/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);
});