當包含MDL CSS時，jQuery .fadeIn（）不起作用
[英]jQuery .fadeIn() doesn't work when MDL css included
問題描述
有人可以解釋一下為什么在本例中，當我包含MDL CSS文件時，隱藏div的.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樣式，一切都可以正常工作。
2 個解決方案
解決方案1
0 2016-08-14 20:58:16
因為材質在其hidden類上使用!important 。 因此，它將始終優先於fadeIn() 。 您必須在該元素上使用自定義的CSS樣式才能使其正常工作。 例子
解決方案2
0 已采納 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>
第一次點擊按鈕時，'fadeIn'不起作用[jQuery]
[英]'fadeIn' doesn't work when first time click on button [jQuery]
在移動應用中與JQuery Mobile一起使用時，fadeIn不起作用
[英]fadeIn doesn't work when used with JQuery Mobile in a Mobile App
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.