5

このデモンストレーションでは、 jqトランジットで「Rotate3d 」と呼ばれるアニメーション効果を使用しています。最初のボックスにマウスを合わせると、すべてが白になるまでボックスが次々と回転し始め、コンテナボックスからマウスを離すと、すべてが黒に戻ると思います。

問題：この問題は、最初のボックスにマウスを合わせてから、コンテナからすばやく連続して数回マウスを出すと発生します。反転するボックスは回転の順序を失い、マウスをオフにすると正しく黒にリセットされないようです。

私が試したこと： fxキューをいじってみましたが、あまり違いはありませんでした。また、アニメーションの実行中にマウスリーブのバインドを解除し、最後のボックスの遅延が経過した後に再度バインドしようとしましたが、それも機能しませんでした。

私が探している答え：これに答えることができるいくつかの方法があります。1つ目は、マウスを外した直後にこれらのアニメーションを強制終了する方法です。2つ目は、マウスを外すたびに最初のボックスから注文を開始する方法です。3番目の答えは、ボックスを回転させた後、マウスアウトですべてがリセットされるようにすることです（キューに追加しますか？）

ソリューションに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 に答える