5

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

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

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

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

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

4

1 回答 1

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');
    });
});
​

这是小提琴。

于 2012-08-20T02:18:47.547 回答