jQueryで2つのCSSアニメーションを切り替えるのは、一度しか動作しません。

Question

jQueryを使用して2つのCSSアニメーションを切り替えようとしていますが、1回しか動作しません。トグルし続けるにはどうすればいいですか？また、何らかの理由で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>

Answer 1

あなたは、不要なクラスとなり、予期しない動作を削除するのを忘れました。 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>

以下のスニペット更新されたコード

はさらに、あなたは最初にあなたのbuttonにクラスmoveupを追加することによって、上記のコードを最適化することができ、その後、あなただけのすべての条件をチェックせずtoggleClassを使用することができます。代わりにhasClass()を使用して.attr('class') === 'movedown'チェッククラスの

//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>

Answer 2

。 moveupクラスを追加するときは、movedownクラスを削除する必要があります。逆も同様です。

下記のコードを確認してください。彼のHTML内のクラスのいずれかを持っているdoesntの

//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>

Answer 3

使用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>