使用jQuery切换两个CSS动画只能工作一次
问题描述:
我想在两个使用jQuery的CSS动画之间切换,但它们只能工作一次!我怎样才能让它保持转换?此外,由于某种原因,这在jsFiddle中似乎不起作用。谢谢,麻烦您了。使用jQuery切换两个CSS动画只能工作一次
//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>
答
你忘了删除不必要的类,因此意外的行为。只需添加removeClass
并删除相应的类。摘录如下
//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').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>
更新的代码
而且可以通过最初加入moveup
类的button
优化上面的代码,然后你可以使用toggleClass
不检查任何条件。
//hide and show counter-button
$('#counter-button').click(function() {
$('#counter').toggle();
//move button down/up on click
$(this).toggleClass('movedown 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" class="moveup">
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>
答
使用toggleClass
//hide and show counter-button
$('#counter-button').click(function() {
$('#counter').toggle();
$('#counter-button').toggleClass('moveup 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" class="moveup">
COUNTER
</div>
<div id="counter">
</div>
@RoryMcCrossan最初OP可是没有任何的类在他的HTML,所以'toggleClass'要么同时删除或将添加两者。如果'moveup'已经存在,那么可以使用'toggleClass'来完成。 – void
啊,是的,你是对的。我的错。尽管我建议在元素中添加一个默认的状态类来防止模糊,并使JS更简单。 –
@RoryMcCrossan yes true! :) – void