jQuery翻轉插件和動畫排隊問題

Question

我的網站http://zhickman.com/上有一系列磁貼。

理想情況下，當您在所有圖塊上滑動鼠標時，我希望這些圖塊可以自己翻轉和還原。 我遇到了以下問題：在使用懸停事件時，在磁貼上滑動只會使它們翻轉一次。 然后，當分別將鼠標懸停在圖塊上時，懸停事件會通過翻轉動畫反復發生，而不是保持靜止。 因此，我添加了一個布爾值，直到調用handlerOut for hover時才翻轉。 當單獨使用圖塊時，此方法有效，但是如果在完成動畫之前將鼠標移出，則圖塊將保持不變。

我想使用隊列，但是在使用全局fx隊列時，添加平鋪翻轉和revertflip動畫會導致平鋪等待其他平鋪完成其動畫。

我使用停止得到了部分功能：

var test = false;
    $( document ).ready(function() {
        $(".box").hover(function(){
            if (test == false) {
                $(this).stop(false, true).flip({speed: 350, direction:'lr', color:'#c5cac6', content:$(this).children('.info').text()})
                test = true;
            }
        }, function(){
            $(this).stop(false, true).revertFlip();
            test = false;
        });
    });

但這會破壞原始的翻轉動畫，如鏈接的網站上所示。

我的問題是：

1）我可以為此使用動畫排隊嗎，正確的方法是什么？ 2）是否有更簡單的選擇（我只是錯誤地使用了止動裝置）？

Answer 1

有一個onBefore回調，您應該可以使用它來停止任何先前的動畫。

像這樣：

$(this).flip({
    speed: 350, 
    direction:'lr', 
    color:'#c5cac6', 
    content:$(this).children('.info').text(),
    onBefore: function(){
         /*
            do stop here-->
            $(this).stop(args);
         */
     },
});

如果在插件的onAnimating和onEnd回調函數中進行設置，則對test布爾值所做的工作可能會更好。

Answer 2

您正在使用的插件似乎沒有應用任何CSS樣式，它附加了一些我認為確實很亂的div元素。

我已經以僅CSS的方式實現了CSS和HTML。

我的主要目標是盡可能減少使用其他樣式和元素。 因此，在演示中，您必須取消嵌套.info和.box元素，並使用.flipper div將它們包裝起來。

您的區塊結構將如下所示

<a href="resume.pdf">
        <div class="flipbox-container">
                <div class="flipper">
                <div class="box resume"><span class="box-header">Résumé</span><br /><br />

                </div>
                <div id="resume-info" class="info">
                        My current résumé. Contains technical skills, employment history, and education history.
                    </div>
                </div>

            </div>
        </a>

看看我制作的完整功能演示http://jsfiddle.net/NSUq5/1/

請記住，我沒有更改您的任何原始樣式。 生成動畫的代碼位於CSS面板的最底部。