jQuery Animation: dejar de animar una vez fuera del mouse

Question

Estoy tratando de hacer que div se deslice hacia afuera y hacia adentro al pasar el mouse, es decir, el mouse entre y salga, respectivamente. Sin embargo, cuando entré y salí varias veces, el div siguió deslizándose hacia adelante y hacia atrás básicamente hasta la cantidad de veces que hice el vuelo estacionario. Por favor, consulte este jsFiddle example.

Como probablemente haya adivinado, espero hacer que el div se detenga (es decir, se deslice hacia adentro) una vez que el mouse esté fuera del elemento independientemente de las veces que lo he desplazado. Creo que falta algo en mi comprensión sobre la animación jQuery.

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

Gracias.

Answer 1

Necesita jQuery .stop() function. Insértalo en tu cadena de comando antes de comenzar una nueva animación, para interrumpir cualquier animación en curso.

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

Working 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

hay un ejemplo

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

y código jquery

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