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/

любые идеи много априорированы!

Большое спасибо!

Answer 1

Это, кажется, работает прекрасно: http://jsfiddle.net/maniator/ZnYx7/3/

^_^