jQuery animate rewind

Question

** here are two examples of the source code, one without the function of what to do when the initial function is ran. http://chaselester.com/rocket/ and http://chaselester.com/rocket2/

I am just having a little issue trying to get my animation to reverse it self.

I have a little rocket ship that when hovered over an area it takes off up in a straight line. I want it to reverse itself after the height specified is reached and just come back down to settle where it began, after the initial animation of it going upward is done.

This code here, when I immediately hover off the area the rocket ship stops going up and goes down below the area where it first started from. I know its because of the bottom: -=1000; that I have specified, but I thought it would run the bottom: +=1000; first all the way then run the bottom: -=1000; and would end right where it began.

So what am I doing wrong? Plus how do I get the animation to go slower, the rocket to move slower on take off and speed up?

Thanks!

function flyMe(){
$( ".over" ).mouseover(function() {
    $( ".flight img" ).animate({
        bottom: "+=1000px",
    }, 1000, 
    function() {
        $( ".over" ).mouseout(function() {
            $( ".flight img" ).animate({
                bottom:"-=1000px",
            },0)
        });
    });
  });   
}

Answer 1

Not sure but are you looking for something like this? http://jsbin.com/fenuhowu/2/edit

So here is the problem, as per the jquery syntax, the code

$( ".flight img" ).animate({
    bottom:"-=1000px",
}

is executed twice. Once when the previous animation is completed and secondly when the mouse is out. Hence the rocket goes below the blast off image. I corrected the issue below. http://jsbin.com/fenuhowu/4/edit

Answer 2

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.