Menu
Hi
I am trying to create a delay in my script that stops curtains from opening for about 2 seconds when the Christmas ball is pressed. This is to allow enough time to load content into an iframe that are hidden behind the curtains.
The script is based on Sam Dunn’s tutorial ‘Animate Curtains Opening with jQuery’ ( [url]http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/
Here is Sam’s Script:
<!–
Animate a Curtain Opening with jQuery
index.html
By Sam Dunn
2009 Build Internet! [url]www.buildinternet.com
–>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“
<html xmlns=”
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>Animate a Curtain Opening with jQuery | Build Internet</title>
<script type=”text/javascript” src=”
<script src=”jquery.easing.1.3.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$curtainopen = false;
$(“.rope”).click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: ‘0px’ }, {queue:false, duration:350, easing:’easeOutBounce’});
$(“.leftcurtain”).stop().animate({width:’60px’}, 2000 );
$(“.rightcurtain”).stop().animate({width:’60px’},2000 );
$curtainopen = true;
}else{
$(this).stop().animate({top: ‘-40px’ }, {queue:false, duration:350, easing:’easeOutBounce’});
$(“.leftcurtain”).stop().animate({width:’50%’}, 2000 );
$(“.rightcurtain”).stop().animate({width:’51%’}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
body {
text-align: center;
background: #4f3722 url(‘images/darkcurtain.jpg’) repeat-x;
}
img{
border: none;
}
.leftcurtain{
width: 50%;
height: 495px;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 495px;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.logo{
margin: 0px auto;
margin-top: 150px;
}
.rope{
position: absolute;
top: -40px;
left: 70%;
z-index: 4;
}
</style>
</head>
<body>
<div class=”leftcurtain”><img src=”images/frontcurtain.jpg”/></div>
<div class=”rightcurtain”><img src=”images/frontcurtain.jpg”/></div>
<img class=”logo” src=”images/buildinter.png”/>
<a class=”rope” href=”#”>
<img src=”images/rope.png”/>
</a>
</body>
</html>
Any help will be much apriciated.
Thanks.
Jet.