jQuery Animate() hover?

Question

I'm using jQuery for the first time, specifically on my own website, and I'm using the animate function to make an email tab move down slightly when hovered upon (check it out in the top right: http://www.tommaxwell.me). However, I don't know how to make the animation pause after completing. I can make the first animation and the animation necessary to have it return to its original state, but I want it to return to its original state after the user moves their cursor away. Here's the code, and keep in mind I realize why it doesn't work, I just don't know a solution as I'm new to jQuery.

$("#emailme").hover(function(){
  $("#emailme").animate({
    paddingTop: "15px"
  }, 100, function() {
    $("#emailme").animate({
        paddingTop: "10px"
    }, 100)
  });
});

Answer 1

The second argument to hover is the callback to invoke when the user moves their mouse away.

$("#emailme").hover(function() {
    $(this).animate({
        paddingTop: "15px"
    }, 100);
}, function() {
    $(this).animate({
        paddingTop: "10px"
    }, 100)
});

So the general idea is:

$('selector').hover(function(){
    //stuff to do on mouse in
}, function(){
    //stuff to do on mouse out
});

Answer 2

You should use the functions $element.mouseover(fn) and $element.mouseout(fn).

So it should be like this:

$("#emailme").mouseover(function(){
    $(this).animate({
        paddingTop: "15px"
    }, 100);
}).mouseout(function(){
    $(this).animate({
        paddingTop: "10px"
    }, 100);
});

This means that attach event handlers to two different events: when you move your mouse over the element it expands and when you move your mouse out it subtracts - just as you want it.