Thanks for your help @rgodse. It was through playing with your code that I came to the answer as to what was happening. I am still not sure why it was interfering with the code but here is what I had to change and it made everything alright. In my CSS I had a rule stated on my image as
.flight img{
bottom:7.5%;
left:10%;
}
When I changed the bottom rule to be top instead:
.flight img{
top:85%;
left:10%;
}
This code now executes just perfect:
$( ".over" ).mouseover(function() {
$( ".flight img" ).animate({
top: "-=1000px",
}, 1000,
function() {
$( ".flight img" ).animate({
top: "+=1000px",
}, 1000, "linear");
});
});
When I had the bottom rule in there, the rocket would immediately jump to the top and then come down the specified pixels, but not to the exact spot since it was jumping all the way to the top of the browser window. I switched that bottom rule to top and it worked just fine.
Thanks for your help.