Javascript 添加类时CSS不透明度是如何工作的？

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

#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在不透明度方面是如何交互的。

Jquery.addClass（）方法只是立即将指定的类添加到元素中，一旦添加，CSS规则就会立即应用，就像在HTML中添加类一样。关于如何应用这些规则，jQuery绝对没有什么特别之处，因此不透明度的应用不应该与任何其他CSS规则有任何不同。如果您认为通过$（this.addClass（“fade-in”）而不是使用$this.css应用规则时会得到不同的结果，我建议设置一个JSFIDLE来显示问题，以便人们可以为您查看。

id选择器（

#myDiv

）类比css中的类选择器（

.fade-in

）具有更高的优先级。因此，当您的div添加了这两个类时，

#myDiv

中的不透明属性将获得更高的优先级。只要稍微更改一下

.fade in

类，您的代码就可以正常工作

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

---

希望能有帮助：）

css会立即生效。我想好了。这是因为我给这个类设置了一个id。就像下面的答案一样，您必须使用以下两种方法覆盖id！重要信息或将id切换到类。我使用了后者，但两者都可以！重要的是，它将保存修订版并保持代码更干净。正如您所评论的，我正确地理解了它。但无论如何，这正是我所需要的。谢谢