Question

I have a jQuery function that flips an element and then turn it back after a few seconds, however there is multiple elements with the same “flip” tag and the setInterval elements flip all the elements back after the first click. How could i implement the flip effect to turn only the elements that have been clicked in e kind of flow, so that not all elements flip after the delay. The code is:

$(document).ready(function() {

    $('.click').toggle(function() //on click functions => toggle elements
    {           

        setTimeout( function() { // trigger the flip-back after delay (1500ms)
        $('.flip').trigger('click');
        }, 1500) 

        $this = $(this);
        $this.addClass('flip');
        $this.children('.front').delay(600).hide(0);
        $this.children('.back').delay(600).show(0);

    },          
        function() 
        {

        $this = $(this);
        $this.removeClass('flip');
        $this.children('.front').delay(600).show(0);
        $this.children('.back').delay(600).hide(0);

        });  
});

My intention is that the elements would flip back after the delay, but now all the clicked elements flip back after the delay, even though they are only visible for the time – delay. Hops this makes sense 🙂

Thnx for any help!

Answer 1

Use, $(this) or this to refer the current item that is click. Also, the extra function is not needed, just use toggleClass() to apply/remove the class.

$('.click').click(function() //on click functions => toggle elements
{           

    var $this = $(this);
    setTimeout( function() { // trigger the flip-back after delay (1500ms)
        $this.trigger('click');
    }, 1500);

    $this.toggleClass('flip');
    $this.children('.front').delay(600).hide(0);
    $this.children('.back').delay(600).show(0);

});