當包含MDL css時，jQuery .fadeIn（）不起作用

有人請解釋我爲什麼（在本例中）隱藏div的.fadeIn（）函數在我包含MDL css文件時不起作用？當包含MDL css時，jQuery .fadeIn（）不起作用

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> 
    <script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      var tst = $("#tst"); 
      tst.fadeIn(250); 
     }); 
    </script> 
</head> 

<body> 
    <div id="tst" hidden>test</div> 
</body> 
</html>

https://jsfiddle.net/L5knc1qh/

沒有MDL風格的一切工作正常。

來源

2016-08-14 skaarj

fadein在「！important」樣式表指令（即：hidden material directive）中存在問題。所以才達到目標的另一種方法是：

$(document).ready(function() { 
 
    $("#test").attr('style', 'display: block !important; opacity: 0;').animate({opacity: 1}, 250); 
 
});

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> 
 
<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script> 
 

 
<div id="test" hidden> 
 
    <p> 
 
     KURRRRRRRRRRRWAAAAAAAAAAAAAAAAAAAAA 
 
    </p> 
 
</div>

來源

2016-08-14 21:45:20 gaetanoM

因爲素材在hidden類中使用!important。所以這總會比fadeIn()先例。您必須在該元素上使用自定義CSS樣式才能使其工作。 Example。

來源

2016-08-14 20:58:16

當包含MDL css時，jQuery .fadeIn（）不起作用

回答

相關問題