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

我试图让东西淡入使用Jquery。我通过scrollTop（）收集信息。所以，当滚动顶部等于div的顶部（offset）时，它将会淡入淡出。或者只是出现。添加类时CSS不透明度如何工作？

#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的交互不透明。

来源

2014-04-26 tywalker

的CSS将立即生效。 – mareoraft

想通了。这是因为我正在带着一个身份证上课。就像下面所说的答案一样，你必须使用！important或者将id切换到一个类来重写id。我用后者，但要么会工作。重要的是会保存修改，并保持你的代码更清洁。 – tywalker

id选择符（#myDiv）类比css中的类选择符（.fade-in）获得更高的优先级。因此#myDiv中的不透明属性在您的div同时添加了这两个类时获得更高优先级。稍微改变.fade-in类，你的代码应该可以正常工作。

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

希望它能帮助:)

来源

2014-04-26 03:42:30 Avishek

我认为它正确，因为你评论。但无论如何，这就是我所需要的。谢谢... – tywalker

jQuery .addClass（）方法会立即将指定的类添加到元素中，一旦添加完成，就会立即应用css规则，就像在HTML中添加类时一样。关于应用规则的方式绝对没有特别的或jQuery特定的，所以不应该以与其他CSS规则不同的方式应用不透明度。如果您认为通过使用$（this）.addClass（“淡入”）而不是使用$ this.css应用规则时会得到不同的结果，我建议设置一个jsFiddle来显示问题，以便人们可以为你看看它。

来源

2014-04-26 03:39:58

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

回答

相关问题