Animate src bug on Safari and Chrome

[EricGagnon]

First of all, a big thanks to everyone working on jQuery for making this library a real masterpiece. I really enjoy your work!

For the bug: I was trying to make a slideshow by making a picture fadeOut, change src, and then re-appear. So I used animation "stacking":

$('#avant_img').fadeOut();

$('#avant_img').animate(

{

src: 'images/realisations/'+(realisation++)+'b.jpg'

}, 0);

$('#avant_img').load(function(){$('#avant_img').fadeIn();});

It works on IE6, IE7, FF3, Opera but doesn't work on Safari and Chrome. The 'src' attribute is just never changed.

Btw, I found a way to solve this bug, but it is not quite elegant:

$('#avant_img').animate(

{

src: 'images/realisations/'+(realisation++)+'b.jpg'

}, 0, function(){$('#avant_img').attr('src','images/realisations/'+(realisation)+'b.jpg');});

[aaron.gundel]

​http://docs.jquery.com/Effects/animate The documentation states that animate is used for modifications to style properties, not attributes. I suspect that is the issue here.

[EricGagnon]

Yeah, but it does work on everything except Safari and Chrome. So this is a compatibility problem!

[dmethvin]

Right, but as aaron says, this is not a supported use of {{{.animate()}}. There are other ways of changing the image src attribute/property via the callback. Did you need some help in reworking the code to do that?

[EricGagnon]

I guess it might be something like:

$('#avant_img, #apres_img').fadeOut('slow',function(){

$('#avant_img').attr('src','images/realisations/'+(realisation)+'b.jpg'); $('#apres_img').attr('src','images/realisations/'+(realisation)+'a.jpg');

}); $('#avant_img, #apres_img').load(function(){$('#avant_img, #apres_img').fadeIn();});

I've submitted the bug because sometimes a little bug may hide a bigger one... So i just wanted to let you know guys!

[dmethvin]

Okay, cool. Sounds like you have it figured out so I'll close the ticket.