Also, see this discussion about using the load event with images: http://groups.google.com/group/jquery-dev/browse_thread/thread/24b107e84adeaaee
On Jan 21, 8:55 pm, Bohdan Ganicky <bohdan.gani...@gmail.com> wrote: > Fixed braces: > > $('#image').fadeOut(500, function() { > $(this).attr('src','images/'+newImg).load(function() { > $(this).fadeIn(1000); > }); > > }); > > -- > Bohdan > > On Jan 21, 8:54 pm, Bohdan Ganicky <bohdan.gani...@gmail.com> wrote: > > > In theory it would be something like this: > > > $('#image').fadeOut(500, function() { > > $(this).attr('src','images/'+newImg).load(function() { > > $(this).fadeIn(1000); > > }); > > > } > > > ...but I'm not at all sure if the "load()" captures the "src" > > attribute change like that. > > > -- > > Bohdan > > > On Jan 21, 7:54 pm, LoicDuros <loic.du...@gmail.com> wrote: > > > > Hi, > > > > I'm new to JQuery and used to use Scriptaculous. I would like to make > > > the following: > > > > A function to fade out an image, then change the src of the image, and > > > once the new src is loaded, to fade in the image back (so that it's > > > fading in with the new image loaded). > > > > Here is how I did it using Scriptaculous, however, the site will now > > > use jQuery and so I have to reproduce the same thing with it - is > > > there such a thing as "observe" in jQuery: > > > function navAction(newImg) { > > > new Effect.Fade('image', {duration:0.5, afterFinish:function(){ > > > document.getElementById('image').src = 'images/' + newImg; > > > $(document.getElementById("image")).observe('load', display); > > > } > > > > }); > > > } > > > > function display(event){ > > > new Effect.Appear('image', {duration:1}); > > > > }