Question

a.t.m如果点击它，我有两个翻转的矩形。我希望他们在大约4秒后翻转。目前我只有两个矩形，但会分配更多的矩形。（顺便说一句，抱歉我的英语不好！）

＆＃13;

$(document).ready(function () {
    $('.flip-container').click(function () {
        if ($(this).hasClass("hoverfixed")) {
            $(this).removeClass('hoverfixed');
        } else {
            $(this).addClass('hoverfixed');
        }
    });
});

＆＃13;

/* simple */
 .hoverfixed .back {
    -webkit-transform: rotateY(0deg) !important;
    -moz-transform: rotateY(0deg) !important;
    -o-transform: rotateY(0deg) !important;
    -ms-transform: rotateY(0deg) !important;
    transform: rotateY(0deg) !important;
}
.hoverfixed .front {
    -webkit-transform: rotateY(180deg) !important;
    -moz-transform: rotateY(180deg) !important;
    -o-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
}
.flip-container, .front, .back {
    width: 320px;
    height: 427px;
    display:inline-block;
    float:left;
}
.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}
.back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="flip-container" data-id="0" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front" style="background: green; width: 323px; height: 429px;"></div>
        <div class="back" style="background: red; width: 323px; height: 429px; text-align:left;"></div>
    </div>
</div>
<div class="flip-container" data-id="1" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front" style="background: black; width: 323px; height: 429px;"></div>
        <div class="back" style="background: yellow; width: 323px; height: 429px; text-align:left;"></div>
    </div>
</div>

＆＃13;

Answer 1

使用settimeout功能在4秒后翻转。

setTimeout(function () {  
    //Code
 });

Jsfiddle Here

图像在4秒后翻转jquery

1 个答案: