I am trying to make a pop up like thing, where a div shows up when I click a link. After sometime, it fades away. I am able to show the divs on click with some animation from animation.css. But I am unable to make it fade away. Here is the code\[code\]!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Clapper</title> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link type="text/css" rel="stylesheet" href="http://stackoverflow.com/questions/15661833/animate.css" /><script type="text/javascript">function demoDisplay(){document.getElementById("clapper").style.display="block";document.getElementById("clapperBG").style.display="block";$("#clapper").fadeOut(200);}</script><!-- STYLES --><style> #clapper { min-width:200px; min-height:200px; top:40%; background-color:#888; left:40%; position:absolute; z-index:1002; display:none;} #clapperBG { min-width:100%; min-height:100%; background-color:#555; opacity:0.6; position:absolute; display:none; } </style></head><body> <div id="wrapper"> <div id="main"> <a href="http://stackoverflow.com/questions/15661833/#" onclick="demoDisplay()" > TEST</a> <div id="clapper" > Some Animation GIF</div> <div id="clapperBG" class="animated flipInY" >Background</div> </div> </div> <footer> </footer></body></html>\[/code\]Please tell me whats wrong ... I tried many examples like \[code\]$("#clapper").fadeOut(2000);\[/code\] and even in document.ready. Still no good.
FadeIn,FadeOut OnClick Not Working
- Thread starter msj484
- Start date