jquery之阻止具有随机效果的 css3 效果

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

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

我尝试过的事情:我尝试过使用 fx 队列，但似乎没有太大区别。我还尝试在动画运行时解除鼠标离开的绑定(bind)，然后在最后一个框的延迟过去后再次绑定(bind)它，但这也不起作用。

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

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

请您参考如下方法:

好吧，经过一段时间的研究，我想出了一个(可能很糟糕)的解决方案，但至少它基本上有效。

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 .