I have routine that rolls through the images in an array every iInternalCount seconds, shown below. It first fades out the current image, does the calculation for the next image, assigns the next image to the src attribute of the image slot and then fades in the new image.  But after starting the fadeOut of the current image the code continues immediately to the image switch line, so we see a switch to the new image and then the new image fade out.  I need a way, probably using the callback function of the fadeOut() method, to keep control from continuing to the image switch line until the current image had finished fading out.  

Is this doable?  Thanks for any suggestions.

function roll()

{

    $("img[name='MEDIAIMAGE']").fadeOut('slow');  // fadeOut the current image

   (iCurrentImage == (xMediaContent.length - 2)) ? iCurrentImage = 0 : iCurrentImage+=2; // bump with wrap

    $("img[name='MEDIAIMAGE']").attr('src', xMediaContent[iCurrentImage]);

    $("img[name='MEDIAIMAGE']").fadeIn('slow');     // fadeIn the new image

    xTimerHandle   = setTimeout("MediaInternalCycle()", iInternalCount);    // call again after iInternalCount

 }