1

Smoetimes 我讨厌 CSS 和更重要的 javascript（在这种情况下是 jQuery）。我有以下内容：

#project {
    opacity: 0.2;

    float: left;
    margin: 10px;
}

在我的 HTML 中，我得到了：

<script type="text/javascript">
    $('#project img').hover(function() {
        $(this).fadeTo("slow", 1);
    });
</script>

<div id="project">
    <div id="img"><img src="..."></div>
    <p>Title:</p> ...
</div>

但由于某种原因，我不能淡入淡出，1.0因为它是我的 CSS 文件1.0中设置的不透明度的最大值。0.2如果我这样做fadeTo("slow", 0.5);，它会逐渐消失0.1。

我怎样才能以简单的方式将“淡入”动画从预定义的0.2不透明度变为完全不透明度？

编辑：CSS 部分在第一个页面加载时加载，HTML 部分$("#content").load($(this).text() + ".html");稍后通过 AJAX ( ) 加载。

4

4 回答 4

4

如果这是您想要的，您不能让孩子 (img) 的透明度低于父母 (#project)。

这根本与 jQuery 或 JavaScript 无关。

于 2013-07-16T12:32:15.777 回答
1

子元素的不透明度不能“覆盖”其父元素的不透明度。

如果可行，您可以指定#project使用rgba()颜色color和background-color属性的不透明度。alpha 属性不会被后代元素继承为不透明度。

于 2013-07-16T12:33:46.637 回答
0

看到这个小提琴。

小提琴

这会很有帮助。

要更改 Css 如下：

#project img{
    opacity:0.2;

    float: left;
    margin: 10px;
}

代码：

<script type="text/javascript">
    $(document).ready(function() {

        $('#project img').hover(function() {
            $(this).fadeTo("slow", 1);
        });
    });
</script>

<div id="project">
    <div id="img"><img src="..."></div>
    <p>Title:</p> ...
</div>

我修改了你的代码。现在看看

于 2013-07-16T12:38:19.080 回答
0

试试这个#project img { opacity: 0.2; 向左飘浮; 边距：10px；}

于 2013-07-16T12:40:28.823 回答