Question

I have a basic html page, and i want the show a “virtual card” to the users, the frontpage shows info about the people, and the backside shows a picture of the person.

How could i implement the toggleClass so that the trasform effects are the same (or reverted) from the first click.

Full example on fiddle: 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');
        });
    });
});​

and finally the 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);
}​

This might seem confusing, so i put everything on fiddle, http://jsfiddle.net/ZnYx7/

any ideas is much appriciated!

Thanks so much in advance!

Answer 1

It seems to be working perfectly fine: http://jsfiddle.net/maniator/ZnYx7/3/

^_^