Trouble animating a fadeout with jQuery

Question

I'm trying to fade out some elements on a page, fetch new ones with AJAX, and then fade in the new ones. The fade in is fine, but the fadeout just won't work. I tried using fadeOut, because fadeIn worked fine, but the fadeout simply wouldn't work - the elements just vanished. I'm now trying to animate an opacity change. It works fine for the fade in. Here is the code:

$(document).ready(function() {
   setTimeout("getTestimonial()", 10000);
});

   function getTestimonial() {
     var counter = $('#products #cart-widget .counter').html();
        $('#products #cart-widget p > span').each(function(index) {
           if($(this).is('.counter')) {
           } else {
              $(this).animate({opacity: 0}, 5000, function(){});
           }
        });
    $.get("testimonials_include.php5", {'counter':counter}, function(data) {
       $('#products #cart-widget p').replaceWith(data);
       $('#products #cart-widget p').children().css("opacity",0);
$('#products #cart-widget p > span').each(function(index) {
   if($(this).is('.counter')) {
   } else {
      $(this).animate({opacity: 1}, 5000, function(){});
   }
});
    });
    setTimeout("getTestimonial()", 10000);
   }

Note that the new elements' opacity was by default 1, so I had to set them to 0 before the fade in could work. Does anyone have any ideas why it isn't fading out?

Answer 1

Ah - the problem was that the elements were being swapped before the fade could complete. I put the entire AJAX function in the completion function for the animate method and hey presto!