Question

一个简单的问题！

我正在使用以下代码执行＆＃34;翻转＆＃34;当鼠标单击某个链接时，用于翻转特定div元素的卡片效果。是否有可能使＆＃34;翻转＆＃34;一段时间后效果会逆转？就好像我用鼠标再次点击一样，但是定时了。我现在可以通过克服，但我想时间。

$(document).ready(function () {
    $('.flip_card').click(function () {
        var x = $(this).attr("id");
        var i = x.substring(10);
        $('.flip' + i + '').find('.card').toggleClass('flipped');
    });
});

我尝试过使用jquery函数delay（）或settimeout，但我只能实现第一个＆＃34; flip＆＃34;效果延迟并在一定时间后发生。那不是我想要的......

我希望我的问题足够令人难以理解。

非常感谢！

Answer 1

试试这个。

$(document).ready(function () {
    $('.flip_card').click(function () {
        var x = $(this).attr("id");
        var i = x.substring(10);
        var ele = '.flip' + i + '';
        $(ele).find('.card').toggleClass('flipped');
        setTimeout(function(){
            $(ele).find('.card').toggleClass('flipped');
        }, 1000);
    });
});

Answer 2

尝试使用.queue()

$(document).ready(function () {
    $(".flip_card").click(function () {
        var x = this.id;
        var i = x.substring(10);
        $(".flip" + i).find(".card").toggleClass("flipped")
        .queue("reset", function() {
          setTimeout(function() {
            $(".flip"+ i + " .card.flipped:eq(-1)").toggleClass("flipped");
             // set duration here
          }, 3000);
        }).dequeue("reset");
    });
});

Answer 3

您可以使用setTimeout()，但是您应该跟踪计时器ID，以便在用户执行超时之前再次单击时取消它。您可以使用.data()功能存储计时器ID，以便每张卡都能跟踪自己的计时器ID。

$(document).ready(function () {
    $('.flip_card').click(function () {
        var i = $(this).attr('id').substring(10);
        var $card = $('.flip' + i).find('.card');

        // Clear the timeout if there is one.
        var timerId = $card.data('timerId');
        if (timerId) {
            clearTimeout(timerId);
        }

        // Flip the card.
        if (!$card.hasClass('flipped')) {
            $card.addClass('flipped');

            // Set the timeout so the card is flipped back after 3 seconds.
            $card.data('timerId', setTimeout(function () {
                $card.removeClass('flipped');
            }, 3000));
        } else {
            $card.removeClass('flipped');
        }
    });
});

jsfiddle

Answer 4

这么简单的事情怎么样。只是链接应该成功。

$(document).ready(function () {
   $('.flip_card').bind('click', function() {
     var x = $(this).attr("id");
     var i = x.substring(10);
     var ele = '.flip' + i + '';
     $(ele).find('.card').toggleClass('flipped').delay(3000).toggleClass('flipped');
   });
});

在给定时间后反转jQuery效果

4 个答案: