JQuery Animation: Stop animation after mouse

Question

I try to do divto invert and when hovering, i.e. mice enter and leave, respectively. However, when I entered and exited several times, I divcontinued to move back and forth mainly to the number of times I did freeze. See this jsFiddle example .

As you probably guessed, I hope to make a stop div(i.e., sliding) when the mouse is outside the element, no matter how many times I hush it up. I think something is missing in my understanding of jQuery animation.

$("#state-slider").hover(function() {
  $(this).animate({
    left: '0'
  }, 500);
}, function() {
  $(this).animate({ left: "-270" }, 500);
});

Thank.

Answer 1

jQuery .stop(). , , .

$('#state-slider').hover(function() {
    $(this).stop().animate({ left: 0 }, 500);
}, function() {
    $(this).stop().animate({ left: -270 }, 500);
});

jsFiddle =)

Answer 2

$("#state-slider").hover(function() {
  $(this).animate({
    left: '0'
  }, 500);
}, function() {
  $(this).stop(true,true).animate({ left: "-270" }, 500);
});

DEMO

http://api.jquery.com/stop/

Answer 3

there is an example

http://jsfiddle.net/amkrtchyan/TQz5U/1/

and jquery code

$(function() {
    $("#state-slider").hover(function() {
        $(this).stop(true,true).animate({
            left: '0'
        }, 500);
    }, function() {
        $(this).stop(true,true).animate({ left: "-270" }, 500);
    });
});