0
Ich versuche, mit jQuery zwischen zwei CSS-Animationen zu wechseln, aber sie funktionieren nur einmal! Wie kann ich es wechseln? Auch das scheint aus irgendeinem Grund in jsFiddle überhaupt nicht zu funktionieren. Bitte und Danke.Das Umschalten von zwei CSS-Animationen mit jQuery funktioniert nur einmal durch
//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>
@RoryMcCrossan zunächst OP muß nicht entweder der Klasse in seine HTML haben, so 'toggleClass' entweder entfernen oder beide fügt beide hinzu. Es könnte mit 'toggleClass' erfolgen, wenn' moveup' dort bereits vorhanden ist. – void
ah ja, du hast Recht. Mein Fehler. Obwohl ich vorschlagen würde, dem Element eine Standardstatusklasse hinzuzufügen, um Mehrdeutigkeiten zu vermeiden und das JS einfacher zu machen. –
@RoryMcCrossan ja wahr! :) – void