web-dev-qa-db-ja.com

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ピクセル上に移動するにはどうすればよいですか？

jqueryhover
26
Stuart Robson

JQueryのホバーイベントには2つのコールバック関数が必要です。1つはポインターがアイテム上を移動するとき、もう1つはアイテムを離れるときです。

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

あなたの場合：

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

JQueryの新しいバージョン（> = 1.7）では、次のアプローチを取ることもできます。

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

私の意見では、これはよりクリーンなアプローチであり、新しい.on（）関数も利用しています（ document here here ）

20
Heath

よりシンプルなソリューション：

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