Класс переключения jQuery

У меня есть базовая 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/

любые идеи очень ценятся!

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


jquery css toggleclass
person stormpat    schedule 06.06.2012    source источник
comment
Скрипка работает, когда я изменил библиотеку на jQuery. Образ не находит конечно, но флип происходит. Какова оставшаяся проблема?   -  person Sam Tyson    schedule 06.06.2012
comment
Fiddle должен быть в jQuery, а не в MooTools   -  person ayyp    schedule 06.06.2012
comment
Чего вы хотите достичь? Он отлично работает на jsfiddle. (просто включите jQuery из левого select вместо mootools)   -  person Jashwant    schedule 06.06.2012
comment
Это не работает нормально. @gkunno добавьте в фон класса .pad, чтобы все видели вашу проблему, потому что теперь она незаметна ;)   -  person Sófka    schedule 06.06.2012

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, все работает отлично: http://jsfiddle.net/maniator/ZnYx7/3/

^_^

person Naftali aka Neal    schedule 06.06.2012
comment
Проблема в том, что изображение не исчезает (переворачивается) так же, как при нажатии, как я могу вернуть эффект sme flip в начале и в конце. У removeClass, возможно, должна быть какая-то задержка или что-то подобное, но я не могу заставить его работать правильно... - person stormpat; 07.06.2012