need help with animate function

need help with animate function

I have this close  to what I want, but not quite there.What I am seeking is for the div to appear when hovering over the image, then animate 15 pixels up and disappear on mouse-out. Right now the animate happens every time you hover over the image, incrementing upward 15 pixels each time from the previous mouseover, and I only want the animation to occur once, unless the browser is refreshed.

any ideas?

Here is the code:
<a id="FullBio"><img src="/Management-Team/VP_of_Sales.jpg" /></a>
<div id="Show_Hide">View Full Profile</div>
<script>
$("#FullBio").hover(
        function () {
            $("#Show_Hide").fadeIn(500);
            $('#Show_Hide').animate({marginTop: '-=15px'});
        },
        function () {
            $("#Show_Hide").fadeOut(500);
        }
    );
    </script>

and CSS

<style type="text/css">
    #Show_Hide {
    display: none;
    width:206px;
    height:35px;
    background-color:#78a22f;
    color:#fff;
    text-align:center;
    border:2px solid #c8df8e;
    font-family:arial, helvetica, sans-serif;
   
}
</style>