A clunky way of doing it but should work, the callback will take at
least one second to execute after starting the request:
// Ajax area
$("ul.questionList>li>a").click(function(){
//Save the clicked a tag for later use
var $this = $(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);
var startTime = new Date().getTime(); //get time before start
of request
$.post("REMOVED"+$entryId, function(data){
var time = new Date().getTime() - startTime; //offset
from startTime
time = (timeDiff > 1000) ? 0 : timeDiff; // max 1s
seTimeout(function(){ //delay it by the difference to
1s
$answer.hide('slow');
$answer.html('<p class="answer">'+data+'</p>');
$answer.slideDown('slow');
},time);
});
}
return false;
});//End of click function
//End of ajax area
On Dec 17, 3:53 pm, flycast <e...@janasnyder.com> wrote:
> 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
