jQuery fadeOut() problem

[chibineku]

I have an AJAX function that cycles through testimonials and fades the new one in, but for some reason the fadeOut() method won't work, despite the syntax being the same.Here is the function:

$(document).ready(function() {   setTimeout("getTestimonial()", 10000);});   function getTestimonial() {	 var counter = $('#products #cart-widget .counter').html();	$.get("testimonials_include.php5", {'counter':counter}, function(data) {	   $('#products #cart-widget p > span').each(function(index) {	   if($(this).is('.counter')) {		 } else {	   $(this).fadeOut('slow', function() {});		 }	   });	   $('#products #cart-widget p').replaceWith(data);	   $('#products #cart-widget p').children().css("display","none");	   $('#products #cart-widget p > span').each(function(index) {		 if($(this).is('.counter')) {		 } else {	   $(this).fadeIn('slow', function() {});		 }	   });	});	setTimeout("getTestimonial()", 10000);   }

I wasn't able to get the fadeIn to work until I had set the display of the new elements to none. I tried specifically setting the display of the existing elements to block before the fadeOut and still nothing.

[ShadowMage]

What if you used animate instead of fadeIn/fadeOut? ie.

$('#products #cart-widget p > span').each(function(index) {   if($(this).is('.counter')) {   } else {	  $(this).animate({opacity: 0}, 'slow');   }});....$('#products #cart-widget p > span').each(function(index) {   if($(this).is('.counter')) {   } else {	  $(this).animate({opacity: 1}, 'slow');   }});

Edited September 10, 2010 by ShadowMage

[chibineku]

Same thing - the old doesn't fade, just vanishes as the new one fades in. I tried moving the fade out bit before the AJAX call, but no change.

[chibineku]

I changed it to the opacity version and it works with the 0/1 values as in your edit. Thanks! But still, it's annoying that the fadeOut method didn't work.

[ShadowMage]

I changed it to the opacity version and it works with the 0/1 values as in your edit. Thanks! But still, it's annoying that the fadeOut method didn't work.

Cool. Glad to hear that worked. :)Yeah, I'm not sure why it is but I've found that some methods don't work while another similar/identical method does. The fadeIn/fadeOut methods use the animate method (I think, if I remember correctly) to do the animation so maybe that's conflicting somehow...not sure.

[chibineku]

Okay, actually it isn't working right. It still skips to the fade in. I tried changing the position of the fade in to before the AJAX call, to after. Sometimes it hangs for a sec if positioned before the AJAX call. Here is what I'm using now:

$(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}, 1000, 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}, 1000, function(){});   }});	});	setTimeout("getTestimonial()", 10000);   }

You can see it here: testimonial box on right

[thescientist]

it seems to be fading in/out in FF 3.6.9

[ShadowMage]

it seems to be fading in/out in FF 3.6.9

Ditto for Opera, safari, and chrome. The only one that doesn't fade the whole testimonial is IE8. It swaps the testimonial then fades in just the person's name.

[chibineku]

Really? I still see it as vanishing and the new one fading in with no fade out. Strange. My brother on a different computer but also FF said the same thing.

[ShadowMage]

Really? I still see it as vanishing and the new one fading in with no fade out. Strange. My brother on a different computer but also FF said the same thing.

Set the duration longer. That way it will be clear whether it is actually fading or not.

[chibineku]

I tried it on 3000ms and there was no fade out for me.

[ShadowMage]

I tried it on 3000ms and there was no fade out for me.

Hmm...indeed....Apparently your eyes are better than mine.

[ShadowMage]

Ah, I think the issue may be that the information is being replaced before it's faded out. Try putting the ajax inside the completion function of the animation:$('#products #cart-widget p > span').each(function(index) { if($(this).is('.counter')) { } else { $(this).animate({opacity: 0}, 1000, function(){}); } });

[chibineku]

Yes! High five!

[ShadowMage]

Yes! High five!

Great! (...but are you sure this time? )

[chibineku]

Ya, it's awesome - thanks!At a slow fade in, the new elements appeared to flicker, so I ditched the line setting the opacity of them to 0 and made the PHP echo the elements with the opacity already set to 0 - much smoother.

[chibineku]

A final note:Adding the AJAX to the complete function of the animate method was the key, but because I was using .each() to fade in 4 elements, the AJAX fired 4 times, making the animation juddery. I changed the PHP to return the elements wrapped in a div and faded it in and out, and the result is smooth as the proverbial baby's bum.