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

我希望此svg绘图在单击时上升，然后在再次单击时下降，在悬停时也要上升和下降一点。我设法完成了鼠标悬停部分的操作，使其一经单击便升起，但再次单击时我无法使其下移。我认为使用“ toggle”代替“ click”会起作用：

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

（变成）

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

但是当我使用该图纸时，它会发疯并立即飞出图片。

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

那么当再次单击它时，如何使它下降呢？

最佳答案

当您查看时，您的小提琴似乎无所事事，但这是一个想法：

<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）之间切换。容易豆豆。 :-)