callback function doesn't execute

callback function doesn't execute

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




I'm newbie in jquery. 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. does anyone can teach me??

html part
  1. <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>