skaarj skaarj - 3 months ago 22
HTML Question

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

Could someone please explain me why (in this example) .fadeIn() function for hidden div doesn't work when I include MDL css files?

<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/

Without MDL styles everything works fine.

Answer

fadein has problem with "!important" style sheet directive (i.e.: hidden material directive). So an alternative way to achive the goal is:

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

Comments