jQueryのhoverイベントの小さなバグについて

jQueryには、シミュレーションcss:hoverという擬似クラスの効果を実現するhover()メソッドがあります.
css偽類の書き方は以下の通りである.

a:hover, a.hover {
    color: #ccc;
}

jQueryのhover()メソッドは次のとおりです.

$("a").hover(function(){
	$(this).css({"color":"#ccc"});
	console.log(1);
})

上記のようにhover()メソッドは、私たちが望む効果を完璧に実現することができます.
しかし、その中には実は発見しにくいバグが隠されている.
以上のようにhover()という関数でfunctionメソッドを書くと、このfunctionに書かれたコードは実は全部で2回実行され、移入時に1回実行され、移出時に1回実行されます(コンソールからコードのconsole.log(1)の1が全部で2回出力されていることがわかります).
私たちの本意は、移行時にコードを実行させたいだけです.これは私たちが望んでいる効果とは違います.では、これはいったい何が原因なのでしょうか.
実はこれはjQueryにhover()を内蔵する方法の問題です.hover()この方法では、2つのfunction関数がカプセル化されています.1つ目は移入時に実行され、2つ目は移出時に実行されますが、上記のように1つのfunction関数しか書かれていない場合、このfunction関数は移入と移出の実行関数であり、この関数を2回実行したことに相当します.
もちろん、このバグは一般的な効果を実行するのにあまり影響しません.しかし、時間に関するアニメーション効果(jQueryのanimate()関数など)に触れると、移動と移動の両方で実行される問題が発生します.

$(".box").hover(function(){
	var this_h=$(this).height()+50;//              50
	$(this).animate({"height":this_h+"px"},1000);
})

以上のように、マウスをclassがboxのこの要素に移動すると、その高さを元の上に50を増やし、次に移動し、50の高さを増やし、1000ミリ秒、すなわち1秒で実行させ、その過程で、移動するとき、何の変化も実行する必要はありません.しかし、実際の効果は、最初に移動すると50の高さが増加し、その後、移動すると50の高さが増加し、その後、再び移動すると100の高さが増加します.
では、この問題をどう解決すればいいのでしょうか.
簡単です.hoverイベントに2つのfunction関数を書き込むといいです.1つ目は移動時に実行させる効果で、2つ目は移動時に実行させる効果です.私たちのような場合は、2番目の関数に何も書かなければいいです.以下のようにします.

$(".box").hover(function(){
	var this_h=$(this).height()+50;//              50
	$(this).animate({"height":this_h+"px"},1000);
},function(){
	//       ，        ，             。
})

もちろん、これらの効果のように、jQueryの他のマウスイベント(例えば、onmouseover、onmouseout、onmouseenter、onmouseleaveなど)を使って実現することもでき、hover()をひたすら使ってイベントの作成を行う必要はありません.