jquery flip revert flip after 3 seconds

Question

With jquery-flip I´m firing a flip effect on hover. How can I revert the div after 3 seconds automatically and also hide the text which was shown on flip?

Here is my markup:

html

<div class="schwarz" id="flipbox1" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!"></div>
<div class="dunkel" id="flipbox2" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!"></div>
<div class="hell" id="flipbox3" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!"></div>

css

div{
        width:200px;
        height:200px;   
        float:left;
    }


.schwarz{
        background-color: #000; 
}

.dunkel{
        background-color: #666; 
}

.hell{
        background-color: darkgray; 
}

js

$(function(){
        $("div").mouseover("click",function(){
            var $this = $(this);
            $(this).flip({
                direction: $this.attr("rel"),
                speed: 200,
                color: $this.attr("rev"),
                content: $this.attr("title"),
                onEnd: function(){
                    console.log('Animation finished');
                    setTimeout(function(){$this.one().revertFlip({
                        content: ""
                    })}, 3000);
                }
                })
                return false;
            });
});

The Animation reverts by use of onEnd also waits through setTimout. But it flips endless. Also content is not set to "".

EDIT:

Here is another approach using mouseout() which seems not to do anything …

                $("div").mouseout(function(){
                clearTimeout(3000);
                var $this = $(this);
                $this.revertFlip({
                    direction: $this.attr("rel"),
                    speed: 200,
                    color: '#ff0000',
                    content: $this.attr("title"),

                });
                })
                return false;
            });

Thanks!

Answer 1

I had to put a counter in the onend to get it to stop here is the fiddle

https://jsfiddle.net/zqL18wu0/

$("#flipPad a:not(.revert)").bind("click",function(){

                    var counter = 0;                
                    var $this = $(this);
                    $("#flipbox").flip({
                        direction: $this.attr("rel"),
                        color: $this.attr("rev"),
                        content: $this.attr("title"),//(new Date()).getTime(),
                        onBefore: function(){$(".revert").show()
                                            $("#flipbox").revertFlip();
                                            },
                        onEnd: function(){

                            var myVar = setInterval(function(){
                                counter++;
                                if (counter < 2)
                                $("#flipbox").revertFlip(); }, 3000);
                                         }

                    })




                });