CODEWITHSUNDEEP
jqueryhover
Stuart Robson
Stuart Robson

Reputation: 1149

jquery hover mouse out

I want a simple slide down / up animation on a mouse over of a link. I can get the mouse over to work but I 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"></script>

<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?

Upvotes: 27

Views: 66168

Answers (3)

Heath
Heath

Reputation: 408

In newer versions of jQuery (>=1.7) you can also take this approach:

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

In my opinion this is a cleaner approach, and it also takes advantage of the the new .on() function (documentation here)

Upvotes: 21

Kuharski
Kuharski

Reputation: 35

Simpler solution:

$("a.button").hover(function() {
  $("a.button").css("cursor","pointer");
});

Upvotes: 1

Philippe Leybaert
Philippe Leybaert

Reputation: 171734

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");
   }
);

Upvotes: 81

Related Questions