jquery hover mouse out

Question

I want a simple slide down / up animation on a mouse over of a link can get the mouse over to work but can't work out how to get the mouseout to do it's thing

here's what i have for the hover effect

<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;

<script type="text/javascript">

google.load("jquery", "1.3.2"); //load version 1.3.2 of jQuery

google.setOnLoadCallback(function() {
  jQuery(
     function($) {
    $("a.button").hover(function(){$(this).animate({"marginTop": "0px"}, "fast")   


   });
});
             });
 </script>

How do i get this to move the margin up 16px when mouse out?

thanks in advance

Cheers Stu

Answer 1

The hover event in jQuery needs 2 callback functions: one when the pointer moves over the item, and one when it leaves:

$(item).hover(function() { ... }, function() { ... });

In your case:

$("a.button").hover(
   function() {
      $(this).animate({"marginTop": "0px"}, "fast");
   },
   function() {
      $(this).animate({"marginTop": "16px"}, "fast");
   }
);