0

我有一个基本的 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/

任何想法都非常受欢迎！

提前非常感谢！

4

1 回答 1

0

它似乎工作得很好：http: //jsfiddle.net/maniator/ZnYx7/3/

^_^

于 2012-06-06T13:44:10.947 回答