There has to be a simple solution for this. I want to animate a button with .hover and then animate it even more with .click. The problem is when the button is clicked, the mouse is no longer hovered so the hover returns to the default position. I need to stop the .hover from returning to the default non-hover state when the button is clicked. Any ideas?

Hover Code:

1.         $('#about-btn').hover(function () {
                 $('#about-btn').stop().animate({
                   marginLeft : 27
                 }, 200);
           }, function () {   
                 $('#about-btn').stop().animate({
                   marginLeft : 0
                 }, 200);
           });
   
   
   
   
   
   
   
   
   
   
   
   
   

Click code:

1.     $('#about-btn').click(function () {
                 $('#about-btn').animate({
                   marginLeft : 745
                 }, 400);
   });