Jump to content
chibineku

jQuery fadeOut() problem

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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

it seems to be fading in/out in FF 3.6.9

Share this post


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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
I tried it on 3000ms and there was no fade out for me.
Hmm...indeed....Apparently your eyes are better than mine. :)

Share this post


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

Share this post


Link to post
Share on other sites

Yes! High five!

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...