我有一个可以变成抽认卡的 jQuery 动画。这是 HTML:
<div class="stage">
<div class="flashcard">
<div class="front">
<p>Front</p>
</div>
<div class="back">
<p>Back</p>
</div>
</div>
这是我的 CSS:
.stage {
-webkit-perspective: 1000;
}
.flashcard {
height: 300px;
width: 500px;
margin: 10% auto;
border: 1px solid gray;
box-shadow: 2px 2px 2px #000;
-webkit-transform-style: preserve-3d;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.flipped, .back {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.front, .back {
position: absolute;
-webkit-backface-visibility: hidden;
height: 300px;
width: 500px;
text-align: center;
}
.front p, .back p {
margin-top: 25%;
font-size: 3em;
}
这是我的 jQuery 代码:
$(document).ready(function() {
$('.flashcard').on('click', function() {
$('.flashcard').toggleClass('flipped');
});
});
我用 PHP 创建了一个 For 循环来循环我的 HTML 代码,因此它可以同时显示多个抽认卡。问题是,如果我随机点击一个抽认卡,所有的抽认卡都会同时转动。
我必须在我的代码中更改什么才能确保只有被点击的抽认卡出现?
最佳答案
尝试在 toggleClass()
函数上使用 $(this)
而不是 $(".flashcard")
。因为在您的脚本中,您实际上是在切换所有类(class)。使用它在您想要触发的特定元素上触发事件。
关于javascript - 如何分别为 Jquery 对象设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38193581/