如何使用 jquery 切换 svg 的动画？答案

【问题标题】：How do I toggle an animation for a svg using jquery?如何使用 jquery 切换 svg 的动画？
【发布时间】：2015-12-30 16:58:09
【问题描述】：

我希望此 svg 绘图在单击时向上，然后在再次单击时向下，并且在悬停时也向上和向下一点。我设法完成了悬停部分，并在单击后使其上升，但再次单击时无法使其下降。我认为使用“切换”而不是“点击”会起作用：

$('#globoamarillo1').click(function() {
$("#globoamarillo1").animate({top: '-=200px'}, 1000);

（改为）

$('#globoamarillo1').toggle(function() {
$("#globoamarillo1").animate({top: '-=200px'}, 1000);

但是当我使用它时，绘图变得疯狂并立即飞出画面。

https://jsfiddle.net/vqvLyctj/3/

那么当它再次被点击时，我怎样才能让它下降呢？

【问题讨论】：

类似：stackoverflow.com/questions/11789665/jquery-animate-svg-element

标签： jquery html css animation svg

【解决方案1】：

当我看着它时，你的小提琴似乎没有做任何事情，但这里有一个想法：

<script>
var myToggle = 0;

$('#globoamarillo1').click(function() {
myToggle = (myToggle + 1) % 2;
if( myToggle > 0 ){ $("#globoamarillo1").animate({top: '-=200px'}, 1000); }
   else { $("#globoamarillo1").animate({top: '+=200px'}, 1000); }
}
</script>

每次单击它时，变量 myToggle 都会在零 (0) 和一 (1) 之间切换。轻松豌豆。 :-)

【讨论】：

太棒了！非常感谢！