How do I toggle an animation for a svg using jquery?

Question

I want this svg drawing to go up when it's clicked and then go down when it's clicked again, and also go up and down a little when it's hovered. I managed to do the hover part and to make it go up once it's clicked, but I cant make it go down when it's clicked again. I figured using "toggle" instead of "click" would work:

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

(changed to)

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

But when I use that the drawing goes crazy and flies out of the picture instantly.

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

So how can I make it go down when it's clicked again?

Similar: http://stackoverflow.com/questions/11789665/jquery-animate-svg-element — Chris Fremgen, Dec 30 '15 at 17:05

score 0 · Accepted Answer · answered Dec 30 '15 at 17:08

Your fiddle doesn't seem to do anything when I look at it but here is a thought:

<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>

Everything time you click on it the variable myToggle will toggle between zero(0) and one(1). Easy peazy. :-)

Amazing! Thank you so much! – Janez Jeretič Dec 30 '15 at 17:14 — Janez Jeretič, Dec 30 '15 at 17:14

How do I toggle an animation for a svg using jquery?

1 Answers1