CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
qalbiol
qalbiol

Reputation: 475

Reverse jQuery effect after a given time

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!

Upvotes: 1

Views: 665

Answers (4)

Yann Poiré
Yann Poiré

Reputation: 134

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

Upvotes: 0

John S
John S

Reputation: 21492

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

Upvotes: 0

guest271314
guest271314

Reputation: 1

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

Upvotes: 1

Namit Singal
Namit Singal

Reputation: 1516

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

Upvotes: 1

Related Questions