JQuery fade div on click, close on 'X' click ~ Hazelfresh Live

Wednesday, June 13, 2012

JQuery fade div on click, close on 'X' click

Wednesday, June 13, 2012 1:02 PM Joe No comments. Share your thoughts!

Problem: I Want a JQuery div that fades on click, with an X button to close out of, that also fades.

Example Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var fade = false;


$(document).ready(function(){
  $("div").click(function(){
    if(!fade)
{
    $("div").fadeTo("slow",0.25);
     fade = true;
}
else
{
   $("div").fadeTo("slow",1);
fade = false;
}
  });
});
$(document).ready(function(){
  $("#close").click(function(){
    $("div").fadeOut(1000);
// You can add code here to Remove the div once it has faded out.
});
});
</script>
</head>
<body>
<div style="background:yellow;width:300px;height:300px">
<button>Click to Fade</button>
<span align="right">
<button style="float:right;" id="close">X</button></span>
</div>
</body>
</html>