在jQuery中有一个hover()方法，它可以实现模拟css中：hover这个伪类的效果。
css伪类写法如下：
a:hover, a.hover {
color: #ccc;
}jQuery中hover()方法如下 ：
$("a").hover(function(){
$(this).css({"color":"#ccc"});
console.log(1);
})
如上所示，hover()方法可以完美的实现我们想要的效果。
但是，在这其中其实还隐藏着一个很难发现的bug。
如上，在hover()这个函数中，如果我们写了一个function方法，那么，我们写在这个function中的代码其实总共会被执行两次，在移入的时候执行一次，移出的时候又被执行了一次（通过控制台可以看到我们代码中的console.log(1)中的1总共被输出了两次）。
而我们的本意是只想让它在移入的时候执行我们的代码，这与我们想要的效果不一样，那么这到底是什么原因导致的呢？
其实这是jQuery中hover()内置方法的问题。hover()这个方法中一共封装有两个function函数，第一个是在移入时执行，第二个是在移出时执行的，而当我们像上面一样只写了一个function函数的时候，它就会默认这个function函数就是移入和移出的执行函数，就相当于将这个函数执行了两遍。
当然，这个bug对于执行一些普通的效果是没什么影响的。但是，当触及到跟时间有关的一些动画效果（例如：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事件中写入两个function函数就好了，其中第一个是我们要让它在移入的时候执行的效果，第二个是让它在移出的时候执行的效果。像我们上面这种情况的话就可以在第二个函数里面什么都不写就好了，如下：
$(".box").hover(function(){
var this_h=$(this).height()+50;//每次高度在上一次的基础上增加50
$(this).animate({"height":this_h+"px"},1000);
},function(){
//我是第二个函数，什么都不写的时候，在移出的时候什么都不会执行。
})
当然，像这些效果的话，其实也有很多别的方法可以完成的，比如我们也可以使用jQuery中的一些其他鼠标事件（例如：onmouseover、onmouseout、onmouseenter、onmouseleave等）来实现，没必要一味地使用hover()来进行事件的编写。
