I know this is a stupid question, but I am using this code for my "doors" and the effect does the inverse operation post-animation. How can I fix this? Thanks!
My jQuery:
Code:
$(document).ready(function() {
/* Elevator effects */
$("#contactMenu").click(function () {
$("#elevator-left").animate({"left": "1000px"}, "200");
$("#elevator-right").animate({"right": "1000px"}, "200");
});
});
My CSS:
Code:
div#elevator-right{
position: fixed;
width: 50%;
background: #FFF;
top: 0;
bottom: 0;
right: -1000px;
margin-left: 100%;
border-left: 5px #000
}
div#elevator-left{
position: fixed;
width: 50%;
background: #FFF;
top: 0;
bottom: 0;
left: -1000px;
margin-right: 100%;
border-right: 5px #000
}
My HTML(5):
Code:
<!--Elevator Doors-->
<!--Elevator Left-->
<div id="elevator-left">
<p>LEFT ELEVATOR DOOR</p>
</div>
<!--Elevator Right-->
<div id="elevator-right">
<p>RIGHT ELEVATOR DOOR</p>
</div>
My CSS and JS are external files; however other functions/styles do appear correctly. I am currently using Chrome 11.