jquery - 如何使用 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

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

<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) 之间切换。轻松愉快。 :-)