忽略速度JS动画运行时的单击事件

Question

我使用的是速度JS，但是当我点击一个触发动画的按钮时，如果我在这个按钮上点击10次，动画就会回复10次。

如果动画正在运行，如何才能忽略单击事件？

我试过event.stopPropagation和event.preventDefault，但是没有效果。

我也尝试过velocity.('stop', true)，但是这将停止动画并在最后一个位置重新启动它，如果我在我的按钮上点击10次，它看起来就像是一个“滞后”。

下面是我的代码：

$('#btn_animate').on('click', function(e){

    divs.velocity('transition.flipXOut',
        {
            duration :500,
            complete: function() {
                $('#box2').velocity('transition.flipXIn', {duration :800})
            }
        })

});

如何避免速度JS动画运行时的单击事件？

Answer 1

我不得不读一些关于速度的文章.

您没有提供“效果注册”部分。

我在速度实例拍的

$.Velocity
    .RegisterEffect("transition.flipXIn", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 1, rotateY: [ 0, -55 ] } ]
        ]
    });
$.Velocity
    .RegisterEffect("transition.flipXOut", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 0, rotateY: 55 } ]
        ],
        reset: { rotateY: 0 }
    });

现在，让我们定义一个叫做"theEffect“的函数。

这一职能是：

• 从按钮中取消绑定单击事件
• 做动画
• 执行动画回调(这是另一个动画)
• 将click事件重新绑定到第二个动画回调中的按钮。

var theEffect = function(){
    console.log("UNBINDING click events from the button");
    $('#btn_animate').unbind("click");

    $('#box2').velocity('transition.flipXOut',{
        duration:500,
        complete: function() {
            $('#box2').velocity('transition.flipXIn', {
                duration:800,
                complete: function() {
                    console.log("BINDING click events to the button");
                    $('#btn_animate').bind("click",theEffect);
                }
            });
        }
    });
}
// Initial binding
$('#btn_animate').bind("click",theEffect);

我让它在这个CodePen上工作。

(持续时间最长)