停止具有随机效果的 css3 效果

Question

在this demonstration 中，我在jq transit 中使用了一个名为“Rotate 3d”的动画效果。我希望，当您将鼠标悬停在第一个框上时，这些框将开始一个接一个地旋转，直到它们全部变为白色，而当您将鼠标移出容器框时，它们将全部变回黑色。

问题：当您将鼠标悬停在第一个框上，然后连续几次快速移出容器时，就会出现问题。似乎翻转的框失去了旋转顺序，并且在鼠标关闭时没有正确重置为黑色。

我尝试过的事情：我尝试过使用 fx 队列，但似乎并没有太大的不同。我也试过在动画运行时解绑鼠标离开，然后在最后一个框的延迟过去后再次绑定，但这也没有用。

我正在寻找的答案：有几种方法可以回答这个问题。首先是如何在鼠标移出后立即终止这些动画。第二个是每次鼠标移出时如何在第一个框开始订购。第三个答案是确保在旋转框后鼠标移出所有内容都会重置（将其添加到队列中？）

如果您可以在解决方案中包含 jsFiddle，那就太好了。

Answer 1

好吧，经过一段时间的工作，我能够想出一个（可能很糟糕）的解决方案，但至少它大部分都有效。

var queue = new Array();

$("#img1").on("hover", function() {
    var delay = 500;
    $("#mainContainer").children('div').each(function(i) {
        var _this = this;
        queue.push(setTimeout(function() {
            animate(_this);
        }, i * delay));
    });
});

function animate(elem) {
    $(elem).css("transition", "500ms all ease-in-out");
    $(elem).css("transform", "perspective(100px) rotate3d(1, 1, 0, 360deg)")
    $(elem).css("background-color", "#fff");
}

function clearQueue() {
    for (index in queue) {
        clearTimeout(queue[index]);
    }        
}

$("#mainContainer").on("mouseleave", function() {
    clearQueue();
    $("#mainContainer").children('div').each(function(i) {
        $(this).css("transition", "0ms all ease-in-out");
        $(this).removeAttr('style');
    });
});
​

这是Fiddle。