animate while the mouse is over

animate while the mouse is over

I have this page where I try to scroll an image using a div:
http://carloeasantos.webcindario.com/forum/index.html

the blue div on top, is responsible for changing the margin-top of the container image.
but as I pass the mouse on div, scrolling is all done at once, I have softer, as in slow animate

some ideia?

script:
  1. $j("#btTop").mouseover(function(){
  2.       var hImg = $j("#cImg img").attr('height');
  3.       var hHide = hImg - $j("#cImg").height();
  4.       while(hHide>0){
  5.             var mT = $j("#cImg").css('margin-top').slice(0,-2);
  6.             if(mT>-200){
  7.                   $j("#cImg").css('margin-top',mT-1+"px");
  8.                   //wait (1000);
  9.             }
  10.             hHide--;
  11.       }
  12. });
HTML:

  1. <div id="square">
  2.       <div class="btHor" id="btTop"></div>
  3.       <div id="cImg">
  4.             <img src="1_Imagem Zoom+.jpg" width="1280" height="800" />
  5.       </div>
  6. </div>