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);
});

jquery动画文本颜色不透明度

1 个答案:

HTML

CSS

JS