jQuery toggleClass

Question

我有一個基本的html頁面，我希望顯示一個「虛擬卡」給用戶，首頁顯示關於人的信息，而背面顯示該人的圖片。

我該如何實現toggleClass，以便從第一次點擊開始，trasform效果是相同的（或恢復）。

上撥弄完整的示例：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/

任何想法都非常appriciated！

非常感謝！

Answer 1

這似乎是工作完美的罰款：http://jsfiddle.net/maniator/ZnYx7/3/

^_^