jquery наведите указатель мыши

Мне нужна простая анимация скольжения вниз / вверх при наведении курсора мыши на ссылку. Я могу заставить мышь работать, но я не могу понять, как заставить мышь делать это.

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

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

Как мне заставить это перемещать поле вверх на 16 пикселей при наведении указателя мыши?


jquery hover
person Stuart Robson    schedule 12.07.2009    source источник
comment
код в примере недействителен! Возможно, вам не хватает второй функции для .hover(func, func)?   -  person Boldewyn    schedule 12.07.2009

Ответы (3)


arrow_upward
80
arrow_downward

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

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

В твоем случае:

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

arrow_upward
21
arrow_downward

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

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

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

person Heath    schedule 24.02.2012

arrow_upward
1
arrow_downward

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

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