jquery - Flippy jquery插件不恢复内容

Question

使用本网站的 Flippy jquery 插件：http: //blog.guilhemmarty.com/flippy/

在初始旋转中一切正常，但原始正面图像不会恢复。事实上，整个反向（recto）过程似乎并没有触发。

jsFiddle在这里

/***********************************************************
    Flippy Plugin:  https://github.com/lepixel/flippy/
                    http://blog.guilhemmarty.com/flippy/
************************************************************/
$('#hamflipbox').hover(
    function(){
        $('#hamflipbox').flippy({
            duration: "300",
            depth: "2", //3 has no depth, 0.12 has MUCH depth
            verso: '<img id="ham2" class="cover" src="http://placekitten.com/141/218"/>',
            recto: '<img class="cover" src="http://placekitten.com/141/219" />',
            onReverseStart: function(){
                alert('hiiii');
            }
        });
    }
);

#hamflipbox{width:141px;height:219px;}
.flippy_container{margin-top:50px;margin-left:50px;}
.cover{box-shadow:3px 3px 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://wmtpayments.com/static/cdn/jquery/plugins/flippy/jquery.flippy.min.js"></script>
<div class="flippy_container">
	<div id="hamflipbox">
        <img id="ham" class="cover" src="http://placekitten.com/141/219" />
	</div><!-- .flipwrap -->
</div><!-- .flippy_container -->

Answer 1

您只需要定义flippy一次。然后，您可以.hover使用.flippyReverse.

像这样：

$('#hamflipbox').flippy({
    duration: "300",
    depth: "2", //3 has no depth, 0.12 has MUCH depth
    recto: '<img class="cover" src="http://placekitten.com/141/218"/>',
    verso: '<img class="cover" src="http://placekitten.com/141/219" />',
    onReverseStart: function(){
        alert('hiiii');
    }
});

$('#hamflipbox').hover(
    function(e){
        $('#hamflipbox').flippyReverse();
        e.preventDefault();
    }
);

JSFiddle在这里