Javascript动画图片，向上滑动bug

Question

我有一个滑动图像，但我遇到了问题。如果您多次将鼠标快速悬停在图像上，然后将鼠标移到图片之外，它仍然会动画。即使您没有将鼠标悬停在动画上，它也会以某种方式录制和播放动画。这是我的代码和 link检查它:

<script type="text/javascript">
$(document).ready(function() {
    $('.col-md-4,.col-xs-4').hover( 
    function () {
        $(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
    },
    function () {
        $(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal" );
    });
});
</script>   

Answer 1

添加.stop()

   function () {
        $(this).find('#hoverpic').stop().animate({ "top": "-=330px" }, "normal" );
    },
    function () {
        $(this).find('#hoverpic').stop().animate({ "top": "+=330px" }, "normal" );
    });

如果 .stop() 不够好

您可以尝试使用 .stop(true) 或 .stop(true, true)

http://api.jquery.com/stop