Geek asks and answers

Stop css3 effect with random effect

In this demo , I use an animation effect called "Rotate 3d" in jq. I expect that when you click on the first box, the boxes will begin to rotate one after another until they all turn white, and when you take out the window from the container, they will all return to black.

Problem: The problem arises when you hover over the first box and then exit the container several times in a row. It seems that the inverted boxes are losing their rotation order, and not reset properly to black with the mouse.

Things I tried: I tried playing with the fx queue, but that didn't seem to make much difference. I also tried to undo the mouse drag while the animation was working, and then snap it again after the delay for the last field had passed, but that didn't work either.

The answer that I'm looking for: . This can be answered. The first would be how to kill these animations as soon as you drag out the mouse. Secondly, how to start an order in the first window every time you exit. The third answer will be that everything be reset when the mouse is output after the window is rotated (adding it to the queue?)

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

+5
source share
1 answer

, , (, ) , , , .

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.

+1

More articles:


All Articles