JQuery :: Callback Function Doesn't Execute?

$("#scroll").hover(function(){
$(this).find(".front").stop().animate({
top:"184px"},500,function(){
$(this).find(".front").stop().animate({ top : "7px"}, 300);
});
});

I try to make a scrolling picture. when mouse roll over the image with .front class will scroll down, but it has to come back after mouse roll out. the scroll down is working but I wrote a callback function, but it doesn't work.

html part
<div id="scroll">
<a href="../images/big_html/babytracker_b.png">
<img src="../images/thumb_html/jukebox.jpg" />
<img src="../images/thumb_html/Tracker.jpg" class="front"/>
</a>
</div>