カスタムを行う必要がある場合は、プラグインを使用するよりも、CSS3 を学習することをお勧めします。MDN には、CSS3トランジション(アニメーション) と変換(フリップの場合は、必要な 3D 回転)に関する優れた記事があります。
これは、スライド/フリップを同時に行うデモです (Webkit のみ。Firefox、IE などで動作させるには、他のベンダー プレフィックスを追加する必要があります)。
デモ
HTML
<div class="container">
<img src="http://lorempixel.com/400/200/food/1/" />
<img class="slider" src="http://lorempixel.com/400/200/food/2/" />
</div>
<input value="flip" id="flip" type="button" />
<input value="slide" id="slide" type="button" />
<input value="both" id="both" type="button" />
CSS
.container {
width: 400px;
height: 200px;
overflow: hidden;
}
.slide {
margin-top: -200px;
}
.flip {
-webkit-transform: rotate3d(0,1,0,90deg);
}
img {
-webkit-transition: all 2s;
}
div {
-webkit-transition: all 1s;
}
JS
var stop = false;
$(".container").each(function(i,e) {
e.addEventListener('webkitTransitionEnd', function(e) {
if (stop === false) {
$(this).toggleClass("flip");
stop = true;
}
});
});
function flip(e) {
stop = false;
$(".container").toggleClass("flip");
}
function slide() {
$(".slider").toggleClass("slide");
}
function both() {
flip();
slide();
}
$(document).on("click", ".container", function() {
flip.call(this);
slide(this);
});
$("#flip").click(flip);
$("#slide").click(slide);
$("#both").click(both);
</p>