27

我想要鼠标悬停在链接上的简单向下/向上滑动动画。我可以让鼠标悬停工作,但我不知道如何让鼠标悬停来做这件事。

这是我对悬停效果的看法:

<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 像素?

4

3 回答 3

81

jQuery 中的悬停事件需要 2 个回调函数:一个是指针在项目上移动时,一个是离开时:

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

在你的情况下:

$("a.button").hover(
   function() {
      $(this).animate({"marginTop": "0px"}, "fast");
   },
   function() {
      $(this).animate({"marginTop": "16px"}, "fast");
   }
);
于 2009-07-12T16:27:50.623 回答
21

在较新版本的 jQuery (>=1.7) 中,您也可以采用这种方法:

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

在我看来,这是一种更简洁的方法,它还利用了新的 .on() 函数(此处的文档

于 2012-02-24T16:08:09.693 回答
1

更简单的解决方案:

$("a.button").hover(function() {
  $("a.button").css("cursor","pointer");
});
于 2010-11-19T00:01:45.510 回答