jquery 翻转 3 秒后恢复翻转

Question

使用 jquery-flip 我在悬停时触发翻转效果。如何在 3 秒后自动恢复 div 并隐藏翻转时显示的文本？

这是我的标记：

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;
            });
});

使用onEnd 恢复的动画也通过setTimout 等待。但它翻转无穷无尽。内容也没有设置为“”。

编辑：

这是另一种使用 mouseout() 的方法，它似乎什么都不做……

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

                });
                })
                return false;
            });

谢谢！

Answer 1

我必须在 onend 中放置一个计数器才能让它停止，这里是 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);
                                         }

                    })




                });

jquery 翻转 3 秒后恢复翻转

jquery flip revert flip after 3 seconds

jquery

flip