jQuery toggleClass

Question

我有一个基本的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/

任何想法都是非常有用的！

提前谢谢你！

Answer 1

它看起来工作得很好：http://jsfiddle.net/maniator/ZnYx7/3/

^_^