我试图让一个元素在每次单击链接时淡出然后淡入。我有以下代码,出于某种奇怪的原因,它只适用于第一次点击。 演示:http://jsfiddle.net/aueLr8k0/3/
$("body").on('click', 'a', function () {
$("div").removeClass('fade').addClass('fade');
})
.fade {
animation: fadeinout .5s;
}
@keyframes fadeinout {
0%,100% { opacity: 1; }
50% { opacity: 0; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#">Click this</a><br><br>
<div style="height:200px;width:200px;background:red"></div>
最佳答案
你可以监听 animationend
事件并移除它的类
$("body").on('click', 'a', function () {
$("div").addClass('fade').one('animationend', function() {
$(this).removeClass('fade');
});
})
.fade {
animation: fadeinout .5s;
}
@keyframes fadeinout {
0%,100% { opacity: 1; }
50% { opacity: 0; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click this</a><br><br>
<div style="height:200px;width:200px;background:red"></div>
关于jquery - 为什么我的 jQuery/CSS 动画只在第一次点击时起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48547765/