Can i set a delay for hover

[willlawrence]

I have the flip set on hover, however it looks a bit crazy when running your mouse over all of the divs.

How can i set a delay so that the flip initiates after a certain amount of time of hover?

Thanks

Will

[JemarJones]

For unique situations such as this you can use the manual trigger as follows:

$('#card').flip({trigger: 'manual'});
$('#card').on('mouseenter',function(){
    setTimeout(function(){
    $('#card').flip('toggle');
  },1000)
});

[willlawrence]

Hi, thanks for this.

I tried replacing this code with mine, but as my card is a class and not an ID, it is flipping all of them on hover. It also doesn't revert back afterwards and stays flipped.

Below is what i am currently using in my footer which flips on hover, and reverts back once not hovered:

$(".card").flip({
  axis: 'y',
  trigger: 'hover'
});

Any ideas how i can alter what you have provided so they flip individually like the original setup, but also with with your delay?

Thanks

[JemarJones]

My example was simply meant to give you an idea of how you could use the manual trigger for unique setups, not as a complete copy and paste solution.

Flipping the correct card is a matter of using the correct selector and the correct this object with jQuery. You can also use the mouseleave event to act on that event. Heres an example:

$('.card').flip({trigger: 'manual'});
$('.card').on('mouseenter mouseleave',function(){
    setTimeout(function(self){
        $(self).flip('toggle');
    },1000,this);
});

Note that all of the modifications here are actually related to the use of jQuery, not specifically to the use of flip itself.