Question

在this demonstration中，我在jq transit中使用了名为“旋转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。

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

1 个答案: