[jQuery] Making an AJAX hide and show smoothly

[flycast]

I am getting some data on a FAQ page using $.post
The problem is that when the server returns the data too fast (most of
the time) the images barely gets time to display and the whole thing
looks very choppy. What I want to do is have the image slideDown
smoothly, display for a certain minimum time and then when the data
returns slideUp the image, replace the image with the returned data
and then slideDown.

I also want to start the request first before I start delaying, that
way it delays for a minimum time period. If the minimum time period is
past when the data returns then it gets displayed immediately.

Here is my code:
// Ajax area
$("ul.questionList>li>a").click(function(){
//Save the clicked a tag for later use
var $aTag = $(this);
//Check to see if there is already an answer for this question
if( $(this).nextAll('p.answer').length != 0){
        //There is already an answer - toggle it
        $(this).nextAll('p.answer').slideToggle("slow");
}else{
        //There is not an answer - we need to get it.
        $($aTag).after('<p class="answer"><img src="images/loading.gif></
p>');
        var $answer = $($aTag).next('p.answer');
        $($answer).hide();
        $($answer).slideDown('slow');
        var $start = $(this).attr("href").search(/[0-9]*$/);
        var $entryId = $(this).attr("href").substr($start);
        $.post("REMOVED"+$entryId, function(data){
                $($answer).hide('slow');
                $($answer).html('<p class="answer">'+data+'</p>');
                $($answer).slideDown('slow');
        });
}
return false;
});//End of click function
//End of ajax area