jquery hover事件只触发一次动画

最近工作时遇到个关于动画的问题，如下：

$("div").hover(
    function() {
        $(this).animate({"margin-top":"100px"},1000);
    }, function() {
        $(this).animate({"margin-top":"200px"},1000);
    });

看代码就是一个简单的鼠标滑过的动画而已，但是当我测试的时候发现，当我发神经似的来回滑动时，事件就被触发了多次，动画也就重复了多次，怎么才能不重复出现，即动画过程中，鼠标滑过这个div，不会触发该事件那？

带着疑问，google之，

发现，原来为元素绑定hover事件之后，如果光标移入移出的速度太快，导致移入的动画还没执行完，就移出光标，则移出的动画效果就会被放到队列，等移入的动画完成后在执行。因此如果光标的移入移出速度太快，就会导致动画效果与移动光标不一致，出现重复出现的情况。

而解决办法有两种：

1、你可以使用jq的stop方法：