jquery hover mouse out

Question

Tôi muốn một slide hoạt hình đơn giản lên/xuống trên một con chuột trên một liên kết. Tôi có thể đưa chuột vào để làm việc nhưng tôi không thể làm việc ra làm thế nào để có được mouseout để làm điều đó.

Dưới đây là những gì tôi có cho hiệu ứng di chuột:

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

Làm thế nào để có được điều này để di chuyển bên lề lên 16px khi chuột ra?

Answer 1

Sự kiện hover trong jQuery cần 2 chức năng gọi lại: một khi di chuyển con trỏ qua các mục, và một khi nó để lại:

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

Trong trường hợp của bạn:

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

Answer 2

giải pháp đơn giản hơn:

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

Answer 3

Trong phiên bản mới hơn của jQuery (> = 1.7) bạn cũng có thể thực hiện phương pháp này:

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

Theo tôi đây là một cách tiếp cận sạch hơn, và nó cũng có lợi thế của các .Trên mới() chức năng (documentation here)