Question

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

Here’s the javascript

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

Here the html

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

Answer 1

What you are looking for is .stop()

Try this fiddle

Two things, I’ve used stop to cancel any currently running animation. Second, I’ve replaced the ‘+=50’ and ‘-=50’ with absolute values because without those, if you keep mousing in and out, the div will end up moving further and further across the screen, which I assume isn’t your objective.

Another thing to remember is, when do an animation on mouseenter that moves or resizes the element, you may potentially end up firing the mouseout event unless the user “chases” the element as you move it.