Question

我的网站http://zhickman.com/上有一系列图块。

理想情况下，当您将鼠标滑过所有瓷砖时，我希望瓷砖可以自行翻转和还原。我遇到了一些问题，当使用悬停事件时，在瓷砖上滑动只会让它们翻转一次。然后，当单独悬停在磁贴上时，悬停事件会一直反复发生，而不是保持静止。所以，我添加了一个布尔值，直到调用了悬停的handlerOut时才会翻转。这在单独使用切片时有效，但如果在动画完成之前将鼠标移出，则切片保持不变。

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

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

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);
         */
     },
});

如果您在插件的test和onAnimating回调函数中进行设置，那么使用onEnd布尔值可能会更好。

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面板的最底部。

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

2 个答案: