我正在尝试使用 jQuery 在两个 CSS 动画之间切换,但它们只能工作一次!我怎样才能让它继续切换?此外,由于某种原因,这在 jsFiddle 中似乎根本不起作用。请谢谢。
//hide and show counter-button
$('#counter-button').click(function() {
$('#counter').toggle();
//move button down/up on click
if ($('#counter-button').attr('class') === 'movedown') {
$('#counter-button').addClass('moveup');
} else {
$('#counter-button').addClass('movedown');
}
});
#counter-button {
font-size: 20px;
position: fixed;
right: 90px;
bottom: 190px;
z-index: 2;
cursor: pointer;
}
.movedown {
animation: down ease forwards 0.5s;
}
@keyframes down {
from {
right: 90px;
bottom: 190px;
}
to {
right: 90px;
bottom: 100px;
}
}
.moveup {
animation: up ease forwards 0.5s;
}
@keyframes up {
from {
right: 90px;
bottom: 100px;
}
to {
right: 90px;
bottom: 190px;
}
}
#counter {
position: fixed;
height: 80px;
width: 228px;
bottom: 100px;
right: 20px;
border: 2px solid black;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter-button">
COUNTER
</div>
<div id="counter"></div>
最佳答案
而不是 .attr('class') === 'movedown'
使用 hasClass()
检查类。在添加 moveup
类时,您应该删除 movedown
类,反之亦然。
检查下面的代码。
//hide and show counter-button
$('#counter-button').click(function() {
$('#counter').toggle();
//move button down/up on click
if ($('#counter-button').hasClass('movedown')) {
$('#counter-button').addClass('moveup').removeClass('movedown');
} else {
$('#counter-button').addClass('movedown').removeClass('moveup');
}
});
#counter-button {
font-size: 20px;
position: fixed;
right: 90px;
bottom: 190px;
z-index: 2;
cursor: pointer;
}
.movedown {
animation: down ease forwards 0.5s;
}
@keyframes down {
from {
right: 90px;
bottom: 190px;
}
to {
right: 90px;
bottom: 100px;
}
}
.moveup {
animation: up ease forwards 0.5s;
}
@keyframes up {
from {
right: 90px;
bottom: 100px;
}
to {
right: 90px;
bottom: 190px;
}
}
#counter {
position: fixed;
height: 80px;
width: 228px;
bottom: 100px;
right: 20px;
border: 2px solid black;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter-button">
COUNTER
</div>
<div id="counter"></div>
关于javascript - 使用 jQuery 切换两个 CSS 动画只能通过一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40481997/