[英]Toggling two CSS animations with jQuery only works once through
I am trying to toggle between two CSS animations using jQuery, but they only work once! 我正在尝试使用jQuery在两个CSS动画之间切换,但是它们只能工作一次! How can I get it to keep toggling?
我如何获得它以继续切换? Also, this doesn't seem to work in jsFiddle at all for some reason.
而且,由于某种原因,这似乎在jsFiddle中根本不起作用。 Please and thank you.
谢谢,麻烦您了。
//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>
Instead of .attr('class') === 'movedown'
check class using hasClass()
. 代替使用
hasClass()
的.attr('class') === 'movedown'
检查类。 And while adding moveup
class you should remove the movedown
class and vice-versa. 并且在添加
moveup
类时,您应该删除movedown
类,反之亦然。
Check the code below here. 在此处检查下面的代码。
//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>
You forgot to remove the unnecessary class and hence unexpected behavior. 您忘记删除了不必要的类,从而删除了意外的行为。 Just add
removeClass
and remove respective classes. 只需添加
removeClass
并删除相应的类。 Snippet below 下面的代码段
//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>
Updated Code 更新的代码
Further you can optimize the above code by initially adding class moveup
to your button
and then you can just use toggleClass
without checking for any condition. 此外,您可以通过首先将类
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>
Use toggleClass 使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.