jQuery Animate только для самых последних всплывающих окон

Question

У меня есть карусель, связанная со списком предметов, и когда вы наводите курсор мыши на каждый из этих предметов, она анимирует карусель в отдельную позицию.

Проблема в том, что если я быстро наведу указатель мыши на кучу этих элементов списка, и анимация будет активирована для каждого из элементов в том порядке, в котором они были отображены. Я хочу, чтобы он автоматически приспосабливался к тому, что является самым последним парением, чтобы не происходило куча ненужных движений.

Вот jQuery для наведения:

$('#item1 a').hover(function() {
    $('#hero-slider ul').animate({
        right: '0'
    }, 500);
});
$('#item2 a').hover(function() {
    $('#hero-slider ul').animate({
        right: '980'
    }, 500);
});
$('#item3 a').hover(function() {
    $('#hero-slider ul').animate({
        right: '1960'
    }, 500);
});
$('#item4 a').hover(function() {
    $('#hero-slider ul').animate({
        right: '2940'
    }, 500);
});

Если я наведусь на все эти элементы в быстрой последовательности, они переместятся на все их позиции перед остановкой.

Answer 1

попробуйте добавить .stop() к функции.

 $('#carProd4 a').hover(function() {
     $('#hero-slider ul').stop().animate({
         right: '2940'
     }, 500);