Как анимировать как обратный вызов другой функции анимации

Question

Я начинаю jquery уровня, и я настраиваю этот скрипт, но мне нужно его изменить. Я хочу иметь его так, чтобы при наведении стрелка перемещалась вправо 3px, а затем обратно в исходное положение слева. Все до выключения мыши.

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

Это сценарий, который у меня есть до сих пор, но проблема его изменения. любая помощь была бы замечательной, чтобы я мог учиться.

<script type="text/javascript"> 

$(document).ready(function() { 
    var $red = $('#red'); 
    var $arrow = $('#arrow'); 
    $('#wording').hover(
     function() { 
     $red.animate({'width': 'toggle'}); 
     $arrow.css('color', 'white').delay(100).animate({'right': '-=3px'}, 'fast'); 
     }, function() { 
     $red.animate({'width': 'toggle'}); 
     $arrow.css('color', 'red').delay(100).animate({'right': '+=3px'}, 'fast'); 
    }); 
}); 

</script> 

Answer 1

$('#wording').on('mouseenter', function() { 
    $red.animate({'width': 'toggle'}); 
    $arrow.css('color', 'white').delay(100).animate({'right': '-=3px'}, 'fast', function(){ 
    $red.animate({'width': 'toggle'}); 
    $arrow.css('color', 'red').delay(100).animate({'right': '+=3px'}, 'fast'); 
    }); 
}); 

Обратный вызов передается в качестве третьего аргумента animate