添加類時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不透明度如何工作？

回答

相關問題