Question

我在我的网站上使用了我的site上带有标签的插件Quickflip。

但是，如果通过例子我在var2上点击太快然后var1就有一个bug。这就是为什么我试图在每次单击选项卡时设置1秒的超时，以便它等待翻转。

以下是我如何调用quickflip功能（和标签）

  $('document').ready(function () {

        $('#flip-container').quickFlip();

        $('#flip-navigation li a').each(function () {
            $(this).click(function () {
                $('#flip-navigation li').each(function () {
                    $(this).removeClass('selected');
                });
                $(this).parent().addClass('selected');
                var flipid = $(this).attr('id').substr(4);
                $('#flip-container').quickFlipper({}, flipid, 1);

                return false;
            });
        });

    });

请问有解决方案吗？

Answer 1

我尝试测试您的代码并找出您提到的问题。

[编辑]

您希望在翻转动画停止之前无法点击标签。我检查了quickflip lib实现并找出div翻转时所有翻盖内容的显示样式都将设置为“none”。所以我实现了一个“is animating”检查功能。

试试这个：

    $('#flip-navigation li a').each(function () {
        $(this).click(function () {
            $('#flip-navigation li').each(function () {
                $(this).removeClass('selected');
            });
            $(this).parent().addClass('selected');
            var flipid = $(this).attr('id').substr(4);

            var isAnimating = true;
            $("#flip-container>div").each(function(index){
                if($(this).css("display")!=="none"&&index<3){
                    isAnimating=false;
                }
            });

            if(!isAnimating){
                $('#flip-container').quickFlipper({}, flipid, 1);
            }

            return false;
        });
    });

[编辑]

这是更新的答案jsfiddle demo

希望这对你有所帮助。

Answer 2

我知道很少有解决方案可以解决您的问题。看一下用于制作另一个函数的Callback等待其他函数在执行之前先完成，然后将其与Unbind函数或Event.Prevent

放在一起

代码可能如下所示：

$（'document'）。ready（function（）{

    $('#flip-container').quickFlip();

    $('#flip-navigation li a').each(function () {
        $(this).click(function () {
            $('#flip-navigation li').each(function () {
                $(this).removeClass('selected');
                $(this).$('#flip-navigation li a').unbind('click', handler);    //Mod 1
            });
            $(this).parent().addClass('selected');
            var flipid = $(this).attr('id').substr(4);

            //Mod 2 ---- Start
            $('#flip-container').quickFlipper({}, flipid, 1, function(){
                $(this).$('#flip-navigation li a').bind('click', handler);
            });
            //Mod 2 ---- End

            return false;
        });
    });

});

我不完全确定如何在插件上实现回调，但是here是一个链接，可能会让你知道如何在quickflip插件上实现回调。

在quickflip期间暂时禁用链接

2 个答案: