getting open doors effect to on form submit
hey all,
trying out jquery for first time. im trying to get a door opening effect when a person logs into my website.
you can check out
http://www.theorgnetproject.org
to see what i mean. ive got a week something up right now.
im unsure the best way to have my form submit and aslo run the jquery function that makes my door open?
now ive got it rigged so the php page that processes the form just waits 2 secs before starting- is there a better way than than that?
also the set up right now only seems to work in firefox. in opera and IE the jquery doesnt do anything unless you double click the submit button, fixes for this???
here is the code.. -any other suggestions are welcome. im new at this and am probably not doing things the optimal way.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<style type="text/css">
#box1
{
height:100%;
width: 50%;
z-index:1;
position:absolute;
}
#box2
{
height:100%;
position:absolute;
left:50%;
width:50%;
z-index:1;
}
#middle {
border:1px solid blue;
background:white;
width:300px;
position: relative;
z-index:4;
margin-left: auto ;
margin-right: auto ;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function(){
$('#middle').fadeOut(600);
$('#box1').animate({
"width":"0px",},1700);
$('#box2').animate({
"left":"100%",
"width":"0px",
},1700);
});
});
</script>
</head>
<body>
<box id="box1" class="box1" name="box1"><img src="images/leftdoor.jpg" style="position:absolute;width:100%;height:100%"> </box>
<box id="box2" class="box2" name="box2"><img src="images/rightdoor.jpg" style="position:absolute;width:100%;height:100%"> </box>
//submit for here with submit button that performs action
<form action="process.php">
<input type="submit" id="submit"/>
</form>
</body>
</html>