PDA

View Full Version : Jquery fade in out



bluewalrus
11-17-2009, 10:05 PM
Im using jquery-1.3.2.js if that makes a difference. I have this code which works 90% fo what I want it to do. What I can't get is the "Close" link to fade out and then close. I can get it fade out but then the overlay is still over the page just not visible or I can get it to go away without fading. Putting a "return true;" in the link's onclick between run_this(); and the display none gets it to fade out, removing it gets it to display none. How can I combine this to it fades out then displays none? Thanks.


<script type="text/javascript">
$(document).keydown(function(e) {
if ((e.keyCode == 27) || (e.keyCode == 88) || (e.keyCode == 120)) {
$('#overview').fadeTo("slow", 0);
$('.black_overlay').fadeTo("slow", 0);
}
});
$(document).ready(function(){
$('.fadein').click(function(){
$('#overview').fadeTo("slow", 1);
$('.black_overlay').fadeTo("slow", .8);
});
});
function run_this() {
$(document).ready(function(){
$('.fadeout').click(function(){
$('#overview').fadeTo("slow", 0);
$('.black_overlay').fadeTo("slow", 0);
});
});
return false;
}
</script>
<style type="text/css">
.fadein {
display: block;
opacity:1;
}
#overview {
display:none;
opacity:0;
display: none;
position:absolute;
top:25%;
left:33%;
margin:0 auto;
width: 300px;
height: 75px;;
background-color: white;
z-index:1002;
overflow: auto;
padding-left:10px;
}
.black_overlay{
display:none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
opacity:0;
}
.fadeout {
position:absolute;
right:10px;
top:5px;
}
</style>
<a href="javascript:void(0);" class="fadein" onClick="document.getElementById('overview').style.display ='block'; document.getElementById('fade').style.display ='block';">Show OverLay</a>
<div id="overview">
<p>This is the overlay
<a href="javascript:void(0);" class="fadeout" onClick="run_this(); document.getElementById('overview').style.display ='none'; document.getElementById('fade').style.display ='none';">Close</a></p></div>
<div id="fade" class="black_overlay"></div>