Javascript JQuery flip插件和动画排队问题

我的网站上有一系列的互动程序

理想情况下，当您将鼠标滑过所有瓷砖时，我希望瓷砖能够自行翻转和恢复。我遇到过这样的问题：当使用悬停事件时，滑过瓷砖只会使它们翻转一次。然后，将鼠标分别悬停在平铺上时，悬停事件会随着翻转动画一次又一次地发生，而不是保持静止。因此，我添加了一个布尔值，在调用hover的handlerOut之前不翻转。这在单独使用平铺时有效，但如果在动画完成之前将鼠标移出，平铺将保持不变

我想使用排队，但在使用全局fx队列时，添加“平铺翻转”和“回复翻转”动画会导致平铺等待其他平铺完成动画

我使用stops获得了部分功能：

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） 是否有更简单的替代方法（我只是使用了错误的停止）？

有一个

onBefore

回调，您应该能够使用它停止以前的任何动画

像这样：

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

---

如果您在插件的

onAnimating

和

onEnd

回调函数中设置布尔值，您使用的

测试可能会更好。
您正在使用的插件似乎没有应用任何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>



看看我制作的全功能演示

请记住，我没有改变任何你原来的风格。生成动画的代码位于CSS面板的最底部。
您考虑过CSS动画吗？这将完全避免使用任何JavaScript。你会接受一个基于css动画的答案吗？我研究了css动画（）但它导致了我现有css的问题，它提供了动态调整大小的框。如果你能提出一个与我现在拥有的调整大小功能相匹配的解决方案，那么是的，那将是完全可以接受的@ಠ_ಠ 如果可能，可以发布包含的
html
，
css
，
js
？谢谢如果我要花很多时间把这件事做好，我会花很多时间让david walsh的css动画工作。它们将被硬件加速，如果你至少在chrome中比较它们，它们看起来比那些javascript翻转动画更平滑、更好。