make div appear instead of sliding to location

Question

I have a progress bar that is supposed to go to one of six thumbnails,depending on which one you click on. It works fine in the sense that it goes to the right thumb, and does it's job. The thing is, I need it to disappear as it moves, and reappear on stopping moving. I tried using hide, but that didn't quite work. The script is

 $(function(){
  $("#content div:not(.control)").bind('touchstart click', function() {
   $(".control").animate({ top: $(this).offset().top, height: $(this).height() });
  });
   });

Can someone help me find the best way to go about doing this? thanks

Answer 1

If i got it right, maybe this would do:

$("#content div:not(.control)").bind('touchstart click', function() {
  // first, we hide .control, then do animation, then in the callback we do fadeIn
  $(".control").hide().animate({
    top: $(this).offset().top,
    height: $(this).height()
    }, function() {
       $(this).fadeIn();
    }
  );
});