0

我在我的网站上使用插件 Quickflip 和我的网站上的标签。

但是，例如，如果我在 var2 上单击太快，然后在 var1 上单击，则会出现错误。这就是为什么我试图在每次单击选项卡时设置 1 秒的超时时间，以便它等待翻转完成。

这是我如何调用快速翻转功能（和选项卡）

  $('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;
            });
        });

    });

请问这个有解决办法吗？

4

2 回答 2

3

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

[编辑]

您希望在翻转动画停止之前无法单击选项卡。我检查了 quickflip lib 的实现，发现当 div 翻转时，所有的翻转内容显示样式都将设置为“none”。所以我实现了一个“动画”检查功能。

尝试这个：

    $('#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 演示

希望这对你有帮助。

于 2013-07-08T07:34:15.287 回答
0

我知道很少有解决方案可以解决您的问题。看看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;
        });
    });

});

我不完全确定如何在插件上实现回调，但这里有一个链接，可以让您了解如何在 quickflip 插件上实现回调。

于 2013-07-08T07:08:22.827 回答