Question

我正在创建一个脉动效果，其中velocity.js作为IE9的后备，（参见CSS动画的box2）当鼠标在动画完成之前离开盒子（保持直到脉冲增长而不是移出）时，脉动元件保持可见。 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)以防止这种情况发生）< / p>

~~编辑：在"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
    })
});

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

1 个答案: