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

JQuery flip plugin and animation queueing issue

本文关键字：排队 问题 动画 翻转 插件 JQuery      更新时间：2023-09-26

我的网站上有一系列互动程序http://zhickman.com/.

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

我想使用排队，但在使用全局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） 有没有更简单的替代方法（我只是错误地使用了停止符吗）？

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

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

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

你的区块结构看起来像这个

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

有一个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布尔值，那么您对其所做的操作可能会更好。

相关文章：