Ditto, except I just leave things as background images and just have
two divs fading in and out.
(If I understood you right, you move the background-image to an <img>?)
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
