包含MDL css时，jQuery .fadeIn()不起作用
包含MDL css时，jQuery .fadeIn()不起作用
提问于 2016-08-14 20:45:10
有人能解释一下为什么(在这个例子中)隐藏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样式，一切都很好。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-14 21:45:20
fadein对"!important“样式表指令(即:隐藏材料指令)有问题。因此，实现目标的另一种方法是：
$(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>
Stack Overflow用户
发布于 2016-08-14 20:58:16
因为material在其hidden类上使用!important。因此，这将始终优先于fadeIn()。您必须在该元素上使用自定义css样式才能使其工作。Example。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38946457
复制相关文章
相似问题
腾讯云开发者
