chibineku Posted September 10, 2010 Share Posted September 10, 2010 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 More sharing options...
ShadowMage Posted September 10, 2010 Share Posted September 10, 2010 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'); }}); Link to comment Share on other sites More sharing options...
chibineku Posted September 10, 2010 Author Share Posted September 10, 2010 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 More sharing options...
chibineku Posted September 10, 2010 Author Share Posted September 10, 2010 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 More sharing options...
ShadowMage Posted September 10, 2010 Share Posted September 10, 2010 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 More sharing options...
chibineku Posted September 10, 2010 Author Share Posted September 10, 2010 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 More sharing options...
thescientist Posted September 10, 2010 Share Posted September 10, 2010 it seems to be fading in/out in FF 3.6.9 Link to comment Share on other sites More sharing options...
ShadowMage Posted September 10, 2010 Share Posted September 10, 2010 it seems to be fading in/out in FF 3.6.9Ditto 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. Link to comment Share on other sites More sharing options...
chibineku Posted September 10, 2010 Author Share Posted September 10, 2010 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 More sharing options...
ShadowMage Posted September 10, 2010 Share Posted September 10, 2010 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 More sharing options...
chibineku Posted September 10, 2010 Author Share Posted September 10, 2010 I tried it on 3000ms and there was no fade out for me. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 10, 2010 Share Posted September 10, 2010 I tried it on 3000ms and there was no fade out for me.Hmm...indeed....Apparently your eyes are better than mine. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 10, 2010 Share Posted September 10, 2010 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 More sharing options...
chibineku Posted September 10, 2010 Author Share Posted September 10, 2010 Yes! High five! Link to comment Share on other sites More sharing options...
ShadowMage Posted September 10, 2010 Share Posted September 10, 2010 Yes! High five!Great! (...but are you sure this time? ) Link to comment Share on other sites More sharing options...
chibineku Posted September 10, 2010 Author Share Posted September 10, 2010 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 More sharing options...
chibineku Posted September 12, 2010 Author Share Posted September 12, 2010 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.