JQuery Animate
-
Hey, Any ideas why this won't work? i want the text and image to go back to the original position then repeat the previous animation, so the text goes out to the right then resets, and comes back in from the left, and the same for the image ..
<
<html>
<head>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
bringIn();
function bringIn()
{
$("#animation_image").animate({top:10},"slow");
$("#animation_text").animate({left:30},2000);
window.setTimeout(takeOut, 5000);
};
function takeOut()
{
$("#animation_image").animate({top:401},"slow").queue(function(){
$("#animation_text").animate({left:1000},"slow",bringIn);
//new
$("#animation_text").css({"left":"-600px"});
$("#animation_image").css({"top":"-200px"});
$("#animation_text").html("Why you no working");
});
};
});</script>
</head><body>
<button>Start Animation</button>#animation_box
{
position:relative;
width:800px;
height:300px;
margin:0px auto 0px auto;
background-color:#333333;
overflow:hidden;
}
#animation_text
{
position:absolute;
display:block;
z-index:2;
left:-600px;
top:20px;
width:300px;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
line-height:45px;
color:white;
}
#animation_image
{
position:relative;
display:block;
float:right;
top:-200px;
margin-right:10px;
}
<body>First 3 hours £36 </body>
</html>Thanks for all your help