javascript - JQuery 翻转插件和动画排队问题

Question

我的网站上有一系列磁贴 http://zhickman.com/ .

理想情况下，当您将鼠标滑过所有图 block 时，我希望图 block 自行翻转和还原。我遇到了一些问题，在使用悬停事件时，滑过瓷砖只会让它们翻转一次。然后，当单独悬停在瓷砖上时，悬停事件会随着翻转动画一遍又一遍地发生，而不是保持静止。因此，我添加了一个 bool 值，以便在调用 handlerOut 之前不翻转。这在单独使用图 block 时有效，但如果您在动画完成之前将鼠标移出，图 block 将保持不变。

我想使用队列，但是在使用全局 fx 队列时，添加 tile flip 和 revertflip 动画会导致 tiles 等待其他 tiles 完成它们的动画。

我使用停止获得了部分功能:

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

您使用的插件似乎没有应用任何 CSS 样式，它附加了一些我认为真的很乱的 div 元素。

我已经使用纯 CSS 方法实现了您的 CSS 和 HTML。

我的主要目标是尽可能少地使用额外的样式和元素。因此，在您的演示中，您必须取消嵌套 .info 和 .box 元素，并用 .flipper div 将它们包裹起来。

您的 block 结构将如下所示

<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>

看看我做的全功能demo http://jsfiddle.net/NSUq5/1/

请记住，我没有更改您的任何原始样式。生成动画的代码位于 CSS 面板的最底部。