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/

^ _ ^