Is there a way of flip waiting until previous flip is complete?

[willlawrence]

I have a grid of blocks that currently flip on hover. It seems a little crazy where you hover over more that one with them all flipping at the same time.

Is there a way that if i hover over one and it flips, and then hover to the next, that it waits for the first block to finish before the next starts?

Hope this makes sense!

Thanks

[JemarJones]

Sure, just register a callback for the flip:done event. Please see the documentation. http://nnattawat.github.io/flip/

[willlawrence]

Sorry im struggling to get my head around this one. Any help would be appreciated.

Below is the code i am using currently which flips them on click, but im not sure how to implement the flip:done so that the previous block flips back when a new one is clicked.

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

[JemarJones]

@willlawrence At the moment if you wish to have some sort of precondition for a flip, you have to use the manual trigger. For example in this fiddle i set up a queue and to flip each card once the previous one had finished flipping, via the flip:done trigger.

This method isn't completely ideal though, as you'd have to essentially rebuild any one of our triggers that you'd like to use. (Note that the fiddle i linked above simply uses mouseenter, rather than a fully functional hover as is provided by our trigger.)

@Download Perhaps a good addition to the API would be allowing the passing of a function to be called as a precondition before an object is allowed to flip? That could look something like this:

$(".card").flip({
  trigger: 'hover',
  precondition: function(){
    ...    
    return myBooleanCondition;
  }
});

We could then simply call a flip objects precondition function when a flip is triggered, and if it doesn't return true we just cancel that entire flip.

I think this would make issues similar to this easier to implement without users being forced to use the manual trigger when they only really want a condition in addition to the triggers we've already made for them. What do you think?

[Download]

@JemarJones That sounds like it would be a nice addition!

[JemarJones]

@Download Awesome, do you think precondition is a good name or is there something simpler we could call it that also makes it clear what it's used for?

[Download]

I like precondition. It's very clear I think.

[JemarJones]

Okay cool. I will work on a PR for it.

[willlawrence]

@JemarJones Thanks so much for looking into this for me.

This solution is great, but my concern is that if you mouseover multiple blocks quickly, it takes some time to catch up.

Instead, im just going to have them as a click to turn them over & then a link on the 'back' rather than making the whole block a link and using the hover.

I have changed your fiddle to click rather than mouseenter, but is there a way with the flip:done that if a block has been clicked and flipped over, and then a different block is clicked, that the previous one flips back to its original state? I think that will be the best solution for me now.

Thanks alot for your help!