2009-07-12 23 views
27

Quiero una animación simple de deslizamiento hacia abajo/arriba sobre el mouse sobre un enlace. Puedo poner el mouse sobre el trabajo pero no puedo encontrar la forma de sacar el mouse para hacer su trabajo.jquery mouse mouse out

Esto es lo que tengo para el efecto emergente:

<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 de hasta 16 píxeles cuando el ratón a cabo?

+0

el código en el ejemplo no es válido! Tal vez te está faltando la segunda función para '.hover (func, func)'? – Boldewyn

Respuesta

76

El evento se acercan al grupo jQuery necesita 2 funciones de devolución de llamada: una cuando el puntero sobre el tema, y ​​uno cuando sale:

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

En su caso:

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

¡Esto es genial! – Mike

+0

¡Una de las respuestas épicas! –

1

solución más simple:

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

Sin mouse out? ... – mowgli

18

En las nuevas versiones de jQuery (> = 1.7) también se puede tomar 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 se aprovecha de la función de la nueva .en() (documentation here)

Cuestiones relacionadas