Jquery mouseenter and mouseout animation
<p>Im trying to do an event on mouseenter and mouseout.
If i put mouseover more than one time it will repeat the number of times i did it, even if still on first animation. Im also trying to stop the animation on mouseleave and animate it back.
Thanks in advance</p>

<p>Here's the javascript</p>

<pre><code>$('.velejador').mouseenter(function(){
    $('.velejador').animate({
        left: '-=50',
        width: '40px'
      }, 2000);
}).mouseleave(function(){
    $('.velejador').animate({
        left: '+=50',
        width: '40px'
      }, 2000);
});
</code></pre>

<p>Here the html</p>

<pre><code>&lt;div id="hidden-cartoons"&gt;
    &lt;img src="&lt;?php echo base_url().'assets/img/cartoons/velejador.png' ?&gt;" class="cartoon velejador"&gt;
    &lt;img src="&lt;?php echo base_url().'assets/img/cartoons/bodoleite.png' ?&gt;" class="cartoon bodoleite"&gt;
&lt;/div&gt;
</code></pre>
