如何在动画结束后停止velocity.js动画？

Question

我正在创建一个脉动效果，其中velocity.js作为IE9的后备，（参见CSS动画的方框2）当鼠标在动画结束前离开盒子（保持到脉冲增长而不是移出）时，脉动元素保持可见。 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");


        });

效果完成后如何在mouseout上停止动画？

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

如果我用这个

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

并且您快速移动鼠标，动画再次开始，有时会在两者之间暂停。

Answer 1

要么使用.velocity("finish")而不是.velocity("stop")，或者 有一个不同的开启和关闭动画，两个动画调用"stop"（即鼠标正确移动时捕获）。

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

编辑：在"finish" bug上打开问题 - 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
    })
});