我有一个基本的html页面，我希望该节目为用户提供“虚拟卡”，首页显示有关人物的信息，背面显示该人的照片。
我如何实现toggleClass，以便第一次点击时转换效果相同（或恢复）。
小提琴的完整示例：http://jsfiddle.net/ZnYx7/
jQuery的：
$(document).ready(function() {
$('.click').on('click', function() {
$(this).addClass('flip').children('.front, .back').delay(600).toggle(0).delay(1500).toggle(0, function() {
$(this).parent().removeClass('flip');
});
});
});
最后是css：
.effects {
-ms-transition-property: all;
-ms-transition-duration: 2s;
-ms-transform: rotateX(0deg);
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
-webkit-transform: rotateX(0deg);
-o-transition-property: all;
-o-transition-duration: 2s;
-o-transform: rotateX(0deg);
-moz-transition-property: all;
-moz-transition-duration: 2s;
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
cursor: pointer;
float: left;
height: 190px;
margin: 1%;
position: relative;
text-align: center;
width: 31%;
}
.front {
background: url("../img/front-icon.png") no-repeat scroll center top transparent;
left: 0;
padding-top: 60px;
position: relative;
right: 0;
top: 0;
display: inline-block;
}
.back {
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
display: none;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.pad {
height: 100%;
}
.flip {
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
这可能看起来令人困惑，所以我把所有东西放在小提琴上，http://jsfiddle.net/ZnYx7/
任何想法都很受欢迎！
提前非常感谢！