2009-07-12 2 views
27

Я хочу, чтобы простая анимация слайдов вниз/вверх по мыши над ссылкой. Я могу заставить мышь работать, но я не могу понять, как заставить mouseout делать это.jquery hover mouse out

Вот что у меня есть для эффекта парения:

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

Как я могу получить это для перемещения поля до 16px, когда мышь вне дома?

+0

код в примере не действует! Возможно, вам не хватает второй функции для функции .hover (func, func)? – Boldewyn

ответ

76

Событие парения в JQuery требуется 2 функций обратного вызова: один, когда указатель перемещается по пункту, и один, когда он оставляет:

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

В вашем случае:

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

это здорово! – Mike

+0

Один из эпических ответов !!! –

1

простое решение:

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

Нет мыши? ... – mowgli

18

В новых версиях JQuery (> = 1.7), вы также можете принять этот подход:

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

На мой взгляд, это более чистый подход, и он также использует функции нового .он() (documentation here)