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

Question

在这个演示中,我在jq传输中使用一个名为"旋转3d"的动画效果.我希望,当你将鼠标放在第一个盒子上时,盒子会一个接一个地开始旋转,直到所有盒子都是白色,当你从容器盒中取出鼠标时,它们都会变回黑色.

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

我尝试过的事情:我试过玩fx队列,但似乎并没有太大的区别.我还尝试在动画运行时取消绑定鼠标离开,然后在最后一个框的延迟过后再次绑定它,但这也不起作用.

我正在寻找答案:有几种方法可以解答.第一个是如何在鼠标移出时立即杀死这些动画.第二个是如何在每次鼠标移动时在第一个框中启动订单.第三个答案是确保在旋转框后将鼠标移出时重置所有内容(将其添加到队列中？)

如果你可以为解决方案包含jsFiddle,那就太棒了.

Answer 1

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

\n\n

var queue = new Array();\n\n$("#img1").on("hover", function() {\n    var delay = 500;\n    $("#mainContainer").children(\'div\').each(function(i) {\n        var _this = this;\n        queue.push(setTimeout(function() {\n            animate(_this);\n        }, i * delay));\n    });\n});\n\nfunction animate(elem) {\n    $(elem).css("transition", "500ms all ease-in-out");\n    $(elem).css("transform", "perspective(100px) rotate3d(1, 1, 0, 360deg)")\n    $(elem).css("background-color", "#fff");\n}\n\nfunction clearQueue() {\n    for (index in queue) {\n        clearTimeout(queue[index]);\n    }        \n}\n\n$("#mainContainer").on("mouseleave", function() {\n    clearQueue();\n    $("#mainContainer").children(\'div\').each(function(i) {\n        $(this).css("transition", "0ms all ease-in-out");\n        $(this).removeAttr(\'style\');\n    });\n});\n\xe2\x80\x8b\n

\n\n

这是小提琴。

\n