Question

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

所有在初始旋转时都能正常工作，但原始正面图像不会恢复。事实上，整个反向（正面）过程似乎没有发生。

＆＃13;

/***********************************************************
    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');
            }
        });
    }
);

＆＃13;

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

＆＃13;

<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 -->

＆＃13;

Answer 1

您只需要定义flippy一次。然后，您可以使用.hover在<{1}}函数中实现flippy动画。

像这样：

.flippyReverse

JSFiddle here

Flippy jquery插件无法恢复内容

1 个答案: