jQuery Animazione: interrompe l'animazione dopo il mouse

Question

Sto provando a far scivolare fuori uno div e, al passaggio del mouse, il mouse entra e esce, rispettivamente. Tuttavia, quando mi sono librato più volte dentro e fuori, lo div continuava a scorrere avanti e indietro praticamente fino al numero di volte in cui facevo il hover. Si prega di fare riferimento a questo jsFiddle example.

Come probabilmente avete indovinato, spero di far cessare div (ossia fatto scorrere in) una volta che il mouse è esterno dell'elemento indipendentemente quante volte ho il mouse su di esso. Penso che manchi qualcosa nella mia comprensione dell'animazione di jQuery.

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

Grazie.

Answer 1

È necessario il numero jQuery .stop() function. Inseriscilo nella catena di comando prima di iniziare una nuova animazione, per interrompere eventuali animazioni in corso.

$('#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

c'è un esempio

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

e codice jquery

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