MDLのCSSが含まれているとjQueryの.fadeIn（）が機能しない

誰かが私のMDLのCSSファイルを含めると隠しdivの（この例では）.fadeIn（）関数が機能しない理由を教えてください。 MDLスタイルなし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>

すべてが正常に動作します。

出典

2016-08-14 skaarj

fadeinには、「！important」スタイルシート指示文（すなわち、隠された指示文）に問題があります。だから、目標をachiveする別の方法は次のとおりです。

$(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（）が機能しない

答えて

関連する問題