chibineku 0 Posted September 10, 2010 Report 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. Quote Link to post Share on other sites
ShadowMage 94 Posted September 10, 2010 Report Share Posted September 10, 2010 (edited) 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 Quote Link to post Share on other sites
chibineku 0 Posted September 10, 2010 Author Report 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. Quote Link to post Share on other sites
chibineku 0 Posted September 10, 2010 Author Report 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. Quote Link to post Share on other sites
ShadowMage 94 Posted September 10, 2010 Report 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. Quote Link to post Share on other sites
chibineku 0 Posted September 10, 2010 Author Report 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 Quote Link to post Share on other sites
thescientist 231 Posted September 10, 2010 Report Share Posted September 10, 2010 it seems to be fading in/out in FF 3.6.9 Quote Link to post Share on other sites
ShadowMage 94 Posted September 10, 2010 Report 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. Quote Link to post Share on other sites
chibineku 0 Posted September 10, 2010 Author Report 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. Quote Link to post Share on other sites
ShadowMage 94 Posted September 10, 2010 Report 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. Quote Link to post Share on other sites
chibineku 0 Posted September 10, 2010 Author Report Share Posted September 10, 2010 I tried it on 3000ms and there was no fade out for me. Quote Link to post Share on other sites
ShadowMage 94 Posted September 10, 2010 Report 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. Quote Link to post Share on other sites
ShadowMage 94 Posted September 10, 2010 Report 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(){}); } }); Quote Link to post Share on other sites
chibineku 0 Posted September 10, 2010 Author Report Share Posted September 10, 2010 Yes! High five! Quote Link to post Share on other sites
ShadowMage 94 Posted September 10, 2010 Report Share Posted September 10, 2010 Yes! High five!Great! (...but are you sure this time? ) Quote Link to post Share on other sites
chibineku 0 Posted September 10, 2010 Author Report 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. Quote Link to post Share on other sites
chibineku 0 Posted September 12, 2010 Author Report 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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.