Ricardo:
Thanks for the solution. While I waited I also came up with the
following solution. What is basically does is use the callback
functions on the slideUp and slideDown functions. That way the slides
end up completing completly before moving on. I suspect that this is
the reason that these were set up to begin with.
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( $($aTag).nextAll('p.answer').length != 0){
//There is already an answer - toggle it
$($aTag).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', function(){
var $start = $($aTag).attr("href").search(/[0-9]*$/);
var $entryId = $($aTag).attr("href").substr($start);
$.post("REMOVED"+$entryId, function(data){
$($answer).hide('slow', function(){
$($answer).html('<p
class="answer">'+data+'</p>');
$($answer).slideDown('slow');
});
});
});
}
return false;
});//End of click function
//End of ajax area
On Dec 17, 1:38 pm, Ricardo Tomasi <ricardob...@gmail.com> wrote:
> 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
