添加类时 CSS 不透明度如何工作？答案

【问题标题】：How Does CSS Opacity Work When Adding Class?添加类时 CSS 不透明度如何工作？
【发布时间】：2014-04-26 11:48:36
【问题描述】：

我正在尝试使用 Jquery 让一些东西淡入淡出。我正在通过 scrollTop() 收集信息。因此，当滚动顶部等于 div 的 offset().top 时，它将淡入。或者只是出现。

#myDiv {
    background: #990000;
    height: 500px;
    width: 100%;
    overflow: hidden;
    opacity: 0;
}

.fade-in {
    opacity: 1.0;
}

这是我的 CSS。

var winHeight = $(window).height();

    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();

        $("#myDiv").each(function() {
            var $this = $(this);
            var trigger = $(this).offset().top;

            if (scrollTop >= trigger) {
                $this.addClass("fade-in");
            }
        });
    });

还有我的 Jquery。有趣的是，如果我使用 $this.css 它可以正常工作。

我只是想知道 CSS 和 Jquery 在不透明度方面如何交互。

【问题讨论】：

css会立即生效。
想通了。这是因为我正在用一个 id 放置类。就像下面的答案一样，您必须使用 !important 或将 id 切换到类来覆盖 id。我使用了后者，但两者都可以。 !important 将保存修订并保持您的代码更干净。

标签： javascript jquery html css

【解决方案1】：

id-selector(#myDiv) 类在 css 中比 class-selector(.fade-in) 获得更高的优先级。因此，当您的 div 添加了两个类时，#myDiv 中的 opacity 属性将获得更高的优先级。只需稍微更改 .fade-in 类，您的代码应该可以正常工作。

.fade-in {
    opacity: 1.0 !important;
}

希望对你有帮助:)

【讨论】：

正如您评论的那样，我明白了。但无论如何，这正是我所需要的。谢谢...

【解决方案2】：

jQuery .addClass() 方法只是立即将指定的类添加到元素中，一旦添加，css 规则就会立即应用，就像您在 HTML 中添加该类一样。规则的应用方式绝对没有什么特别或特定于 jQuery 的，因此不透明度的应用不应与任何其他 CSS 规则有任何不同。如果您认为通过 $(this).addClass("fade-in") 而不是使用 $this.css 应用规则时会得到不同的结果，我建议您设置一个 jsFiddle 来显示问题所以伙计们可以给你看看。

【讨论】：