velocity.jsを使用した動作中の判定方法

jqueryのプラグインであるvelocity.jsを使用して、特定の要素をクリックすると別の要素が動き出すというアニメーション処理を作成しています。
velocity.jsを使用している理由としては、cssのtransformの値を変化させるのが、jquery標準であるanimateでは実現できなかったためです。

要素を何度もクリックしてしまうと、その分アニメーションを実行してしまうので、まだアニメーションが完了していないうちはクリックしても、次のアニメーションを実行させないよう、判定の処理を挟みたいと思っています。
しかし、animateだとis(":animated")と書けばまだ動作中かどうかの判定が出来たのですが、velocity.jsの場合はこれが効かず、そのうえ何と置き換えたらいいのかがわからず、困っています。
どのように記述すれば良いのでしょうか？

lang
1<p class="move">右に移動</p>
2<p class="box">■</p>

lang
1$(".move").click(function() {
2	if (!$(".box").is(":animated")) {
3		$(".box").velocity({
4			"translateX": "+=100px"
5		}, 500);
6	}
7});

lang
1$(".move").click ->
2	if !$(".box").is(":animated")
3		$(".box").velocity {
4			"translateX": "+=100px",
5		}, 500
6

行動規範の内容に同意します

回答1件

ベストアンサー

Velocity.jsのオプションでアニメーションの開始、終了時に実行するfunctionが指定できるので、その中でクリックイベントを捕捉するのがシンプルかと。

lang
1<!DOCTYPE html>
2<html>
3<head>
4<script src="//code.jquery.com/jquery-1.11.3.js"></script>
5<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
6</head>
7<body>
8<p class="move">右に移動</p>
9<p class="box">■</p>
10
11<script>
12var bindAnimation = function() {
13  $(".move").on("click", function(){
14    $(".box").velocity(
15      {translateX: "+=100px"},
16      {
17        begin : function() { $(".move").off("click");},
18        complete: bindAnimation
19      }
20    );
21  });
22};
23
24$(function(){
25    bindAnimation();
26});
27
28</script>
29</body>
30</html>