动画完成后如何停止velocity.js动画？

Question

我正在使用velocity.js 创建一个脉动效果作为IE9 的后备，（参见box2 的CSS 动画） 当鼠标在动画完成之前离开框（保持直到脉冲增长而不是移出）时，脉动元素保持可见。 https://jsfiddle.net/02vu80kc/1/

        $(".box").hover(function () {

            $(this).find('.effect-holder').velocity({
                scale: [1.2, 0.9],
                opacity: [1, 0]
            }, {
                easing: 'ease-out',
                duration: 800,
                loop: true
            }, {
                queue: false
            }).velocity("reverse");

        }, function () {

            $(this).find('.effect-holder').velocity("stop");


        });

效果完成后如何在鼠标悬停时停止动画？

我试图远离.removeAttr('style')，并希望动画完成而不是停止。任何帮助表示赞赏。

如果我用这个

$(this).find('.effect-holder').velocity('reverse').velocity("stop");

如果你快速移动鼠标，动画会再次开始，有时会在两者之间暂停。

Answer 1

要么使用.velocity("finish") 而不是.velocity("stop")，要么 有不同的开启和关闭动画，两个 动画都调用"stop"（即，当鼠标移动正常）。

还要注意{... loop:true ...} 意味着第一个动画永远不会结束，因此"stop" 将在停止后立即发生“反转”（调用.velocity("stop", true) 以防止这种情况发生）

编辑：关于 "finish" 错误的未解决问题 - https://github.com/julianshapiro/velocity/issues/495

edit2：添加简单示例：

$("box").hover(function() {
    // over
    this.velocity("stop", true).velocity({
        scale: [1.2, 0.9]
    }, {
        duration: 800,
        loop: true
    })
}, function() {
    // out
    this.velocity("stop", true).velocity({
        scale: 0.9
    }, {
        easing: "ease-out",
        duration: 800
    })
});