다른 애니메이션 기능에 대한 콜백으로 애니메이션하는 방법

Question

저는 초급 수준의 jquery이고이 스크립트를 설정했지만 수정해야합니다. 마우스를 움직이기 전에 마우스를 움직이면 화살표가 오른쪽 3px로 이동 한 다음 왼쪽 원래 위치로 돌아 가기를 원합니다.

지금은 원래 위치로 돌아가도록 설정되어 있지만 마우스를 놓은 후에 만 ​​설정됩니다. 그 단계를 콜백으로 가리 키기를 원합니다. 그래서 그것은 오른쪽으로 이동 한 다음 연속적으로 왼쪽으로 이동합니다. 빨간색 상자 효과는 호버 (hover) 및 아웃 (out)에 대해 동일하게 유지됩니다.

이것은 지금까지 가지고 있지만 문제를 변경하는 스크립트입니다. 어떤 도움이라도 배울 수있어서 좋을 것입니다.

<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