Jump to content

jQuery fadeOut() problem


chibineku
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 by ShadowMage
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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(){}); } });

Link to comment
Share on other sites

Yes! High five!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...