如何使用jQuery切换svg的动画？

Question

我希望这个svg绘图在被点击时上升，然后在再次点击时下降，并且当它被徘徊时也上下一点点。我设法做悬停部分，并让它一旦点击就升起来，但是当它再次被点击时，我不能让它停下来。我想用“切换”，而不是“点击”将工作：

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

（改变）

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

但是当我使用的图纸去疯狂飞出来的画面瞬间的。

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

所以我怎么能使其走下来时，它再次单击？

Answer 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）。容易啪嗒。 :-)