Reverse jQuery effect after a given time

Question

one quick question!

I am using the following code which does a "flip" card effect to flip a specific div element, when a certain link is mouse clicked. Is it possible to make the "flip" effect reverse after some time? Exactly as if I was clicking again with the mouse, but timed. I can do it now by cliking, but I would like to time it.

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

I have tried using the jquery functions delay() or settimeout, but I can only achieve that the first "flip" effect is delayed and happens after certain time. That is not what I want...

I hope my question is understanble enough.

Many thanks!

Answer 1

Try this.

$(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

Try utilizing .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

You can use setTimeout() , but you should keep track of the timer ID so you can cancel it if the user clicks again before the timeout has executed. You can use the .data() function to store the timer ID so each card keeps track of its own timer 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

How about something this simple. Just chaining should make it.

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