how to revertFlip of two cards that are not the same?

i am using flip plugin of jqu开发者_如何学运维ery. i would like to flip a card(div), after it finished to flip,immediately to revertFlip it. that what i tried:

$("#flipbox").bind("click",function(){
        $(this).flip({
            direction:'tb',
            onEnd: function() {
                $(this).revertFlip();
                console.log('when the animation has already ended');

            }
        })
    } 

Do you have any idea?

Thanks.

There are two issues to take into account here. When onEnd is being called and how revertFlip() works.

onEnd fires when the animation ends, but not when the logic of the functions ends, meaning a call to revertFlip() will not fire!

revertFlip() also has the onBefore, onAnimation and most importantly onEnd events, meaning a simple revert will loop indefinitely.

To fix the first issue, just set a timeout/delay.

To fix the second issue, you could use a boolean value.

$("#flipbox").bind("click",function(){
    var flip=true;
    $this=$(this);
    $this.flip({
        direction:'tb',
        onEnd:function(){
            if(flip){
                flip=false;
                setTimeout(function(){$this.revertFlip();},200);
            }
        }
    });
});

Here's an example on jsfiddle.

It seems your plugin calls the callback a bit too early to handle revertFlip correctly. The only simple workaround I see here is to give the plugin the time it needs...

This does work:

var flag = false;
$('#flip').flip({
    direction: 'tb',
    onEnd: function() {
        if(!flag) {
            // 400ms should do the trick.
            setTimeout(function(){ $('#flip').revertFlip(); }, 400); 
            flag = true;
        }
    }
 });

The purpose of the flag stuff is to prevent infinite recursive callbacks on onEnd.