Klickereignis ignorieren, wenn die Velocity JS Animation läuft

Question

Ich benutze Velocity JS, aber wenn ich auf eine Schaltfläche klicke, die eine Animation auslöst, wenn ich 10 Mal auf diese Schaltfläche klicke, wird die Animation 10 Mal wiederholt.

Wie ist es möglich, das Klickereignis zu ignorieren, wenn eine Animation läuft?

Ich versuchte event.stopPropagation und event.preventDefault, aber es gibt keinen Effekt.

Ich versuchte auch velocity.('stop', true), aber das wird die Animation stoppen und es an der letzten Position neu starten und es sieht aus wie eine "Verzögerung", wenn ich 10 mal auf meine Schaltfläche klicke.

Dann ist hier mein Code:

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

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

}); 

Wie kann ich das Click-Ereignis zu vermeiden, wenn eine Geschwindigkeit JS Animation läuft?

Answer 1

hatte ich auf ein wenig über Geschwindigkeit zu lesen ...

Sie nicht die „-Effekt registration“ Teil vorsah.
Ich nahm es in der Velocity examples

$.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 } 
    }); 

So, jetzt wollen wir eine Funktion definieren, die „Der Effekt“ genannt.
Diese Funktion führt:

• unbind Click-Ereignisse vom Button
• die Animation tun
• tun, um die Animation Rückruf (das ist eine andere Animation)
• Wieder bindet `click` Ereignisse an die Taste im zweiten Animationsrückruf.

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); 

Ich habe es in this CodePen arbeiten.
(mit der längsten Dauer)