-2

このサイトから Flippy jquery プラグインを使用する: http://blog.guilhemmarty.com/flippy/

最初の回転ではすべて正常に機能していますが、元の正面の画像は元に戻りません。実際、リバース (reto) プロセス全体が起動しているようには見えません。

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

4

1 に答える 1