javascript - 在给定时间后反转 jQuery 效果

Question

一个简单的问题!

我正在使用以下代码，当单击某个链接时，它会产生“翻转”卡片效果以翻转特定的 div 元素。一段时间后是否可以使“翻转”效果反转？就像我再次用鼠标点击一样，但计时。我现在可以通过点击来完成，但我想计时。

$(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，但我只能实现第一个“翻转”效果被延迟并在特定时间后发生。这不是我想要的...

我希望我的问题足够明白。

非常感谢!

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);
    });
});