mousein - jQuery mover el mouse

jquery on mouse press

Question

Quiero una simple animación de deslizar hacia abajo / arriba con el mouse sobre un enlace. Puedo hacer que el mouse funcione, pero no puedo averiguar cómo hacer el mouseout para hacerlo.

Esto es lo que tengo para el efecto hover:

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

¿Cómo consigo esto para mover el margen hacia arriba 16px cuando el mouse está fuera?

Answer 1

El evento de desplazamiento en jQuery necesita 2 funciones de devolución de llamada: una cuando el puntero se mueve sobre el elemento y otra cuando sale:

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

En tu caso:

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

Answer 2

En las versiones más nuevas de jQuery (> = 1.7) también puede adoptar este enfoque:

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

En mi opinión, este es un enfoque más limpio, y también aprovecha la nueva función .on () ( documentación aquí )

Answer 3

Solución más sencilla:

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