stop an looping animation on hover and click to start it again
<p>In the link below there are some bubbles wich animates from left to right in a loop. If you hover over one of them, it gets larger and stops animating. My problem is that the bubble doesnt stop for very long, I want it to stop permanently, until you click on it</p>

<p><a href="http://jsfiddle.net/jukke/SU4gJ/1/" rel="nofollow">http://jsfiddle.net/jukke/SU4gJ/1/</a></p>

<p>You are also more than welcome to rewrite parts of the code to make it better/cleaner. I dont really have much experience coding :)</p>
