javascript - 动画完成后如何停止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
    })
});