jQuery .fadeIn() 在包含 MDL css 时不起作用

Question

有人能解释一下为什么（在这个例子中）隐藏 div 的 .fadeIn() 函数在我包含 MDL css 文件时不起作用吗？

<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 样式一切正常。

Answer 1

因为 material 在 hidden class 上使用 !important。因此，这将始终优先于 fadeIn()。您必须在该元素上使用自定义 css 样式才能使其正常工作。 Example.

Answer 2

fadein 与“!important”样式 sheet 指令有问题（即：隐藏的 material 指令）。因此，实现目标的另一种方法是：

$(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>

jQuery .fadeIn() 在包含 MDL css 时不起作用

jQuery .fadeIn() doesn't work when MDL css included

html

jquery

hidden

fadein