Question

In this demonstration, I am using an animation effect called “Rotate 3d” in jq transit. I expect that, when you mouse over the first box, the boxes will start rotating one after another until all of them are white, and when you mouse out off the container box, they will all change back to black.

Problem: The problem occurs when you mouse over the first box then out of the container a few times in rapid succession. It seems that the boxes flipping lose their order of rotating and not reset properly to black on mouse off.

Things I have tried: I have tried playing around with the fx queue but it didn’t seem to make much of a difference. I have also tried unbinding the mouse leave while the animations are running and then binding it again after the delay for the last box have passed, but that didn’t work either.

Answer I’m looking for: There are a few ways this can be answered. The first would be how to kill those animations as soon as you mouse out. The second would be how to start the order at the first box every time you mouse out. The third answer would be to ensure that everything is reset on mouse out after the box is rotated (adding it to queue?)

If you could include the jsFiddle for the solution, that would be great.

Answer 1

Okay after a while working at this I was able to come up with a (probably poor) solution, but at least it mostly works.

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

Here’s the Fiddle.