Thanks for this, I have though about setting the image as a background image, but i don't think this will work on this case, as I am swapping out a block of html which contains and image, some text and a link.
each of the html blocks ar generated by a backend php cms and passed to the browser as an array. So is there a way to obtain a smooth transition between these blocks without rewiting the whole system? So for my ignorance in these matters as i am very new to javascript and mootools ( more of a php developer guy) Once again thanks for you help all the best Janus On 26 June, 16:05, Oskar Krawczyk <[email protected]> wrote: > Nathan, you sir are a genius! Such a simple solution, why haven't I thought > of that... > > ___ > > Oskar Krawczykhttp://nouincolor.com > > On Fri, Jun 26, 2009 at 15:33, Ryan Florence <[email protected]> wrote: > > Ditto, except I just leave things as background images and just have two > > divs fading in and out. > > > Ryan Florence > >http://ryanflorence.com/blog > > > On Jun 26, 2009, at 6:42 AM, nwhite wrote: > > > How I have accomplished this is use a bit of css (background-image). When > > the image opacity = 1 change the background-image to the next image. As you > > fade the image out it will look like the background image is fading in. Once > > opacity = 0 move background image to image set opacity = 1 and change > > background image and repeat. > > > I hope that makes sense. > > > On Fri, Jun 26, 2009 at 5:36 AM, janus <[email protected]> wrote: > > >> I have a little function which takes the content of a specified div, > >> fades it out, loads another image and fades it in. This function loops > >> evry 10 seconds or so. > >> the key function of the process is below. > > >> function showImage(content) > >> { > >> var placeholder = $('JSplaceholder'); > >> //setup tween > >> var tween = placeholder.get('tween', {property: 'opacity'}); > >> //fade it away > >> tween.start(0).chain(function(){ > >> //get value from elsewhere and inject it in the dom > >> placeholder.empty().set('html', content);; > >> //show again > >> tween.start(1); > >> }); > >> setTimeout(changeImage, (seconds_between_photos * 1000)); > >> } > > >> JSplaceholder is the name if the div wher the content is replaced > >> content in some html containing an image passed from another function > >> (changeImage). > > >> This all works perfectly. However, is is possible to, rather than > >> fading the existing content completly out and then fading the new > >> content in, do this simultaneously to make a nice smoth transition > >> between images? > > >> I am sure it just needs a tweek of the above function, but I am not > >> too sure how to go about it? > > >> I hope all this makes sense. > > >> Any help would be most appreciated. > > >> cheers > > >> janus
