The jQuery fadeIn and fadeOut functions do not work when you click an item

advertisements

I am trying to make a pop up like thing, where a div shows up when I click a link. After some time, it fades away. I am able to show the div elements on click with some animation from animation.css. But I am unable to make it fade away. Here is the code:

<!DOCTYPE HTML>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Clapper</title>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <link type="text/css" rel="stylesheet" href="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="#" 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>

Please, tell me what's wrong... I tried many examples like $("#clapper").fadeOut(2000); and even in document.ready but still no good.


Try using fadeToggle() on the element you want to fade in/out and using jQuery .click() event on the <a> tag:

$("a").click(function() {
    $("#clapper").fadeToggle();
});

Changing HTML to this:

<div id="wrapper">
     <div id="main">
     <a href="#"> TEST</a>
     <div id="clapper"> Some Animation GIF</div>
     <div id="clapperBG" class="animated flipInY">Background</div>
</div>

Exmaple here: example