在JQuery中鼠标悬停和鼠标移动时停止和继续动画的方法

Question

例如:

一个简单的例子来解释:

$('.moveDiv').animate({ "margin-left": 2000 }, 20000, 'linear');

在moveDiv element将移动,当它被装载到左,而现在,当mouse move over了moveDiv element,我希望它停下来,继续在移动mouse move out!

有任何想法吗？

我在stackoverflow的这个问题中找到了这个代码,所以,我只是想修改代码,使它可以停止并在鼠标悬停时继续动画!!

代码的演示

Answer 1

暂停/恢复动画插件

    $(document).ready(function () {

        $(".moveDiv")
        .mouseover(function () { $(this).pauseAnimation(); })
        .mouseout(function () { $(this).resumeAnimation(); })
        .startAnimation({ "margin-left": 2000 }, 20000, 'linear');

    });