如何動畫作爲回調到另一個animate函數

Question

我是初學者水平jQuery和我建立這個劇本，但我需要對其進行修改。我想擁有它，這樣懸停，箭頭移動到右側的3px，然後回到左原始position..all鼠標移動之前進行。

現在它設置成只老鼠出來後返回到原來的位置，但...。我想把這個步驟包含在懸停中作爲回調。所以它移動到右邊然後連續離開。懸停和跳出的紅色框效果保持不變。

這是我到目前爲止的腳本，但有一個問題改變它。任何幫助都會很棒，這樣我就可以學習。

<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