I'm sure there's a cleaner way to do this, but my first thought would be to
wrap the img in a div, set the div to have the image as it's background,
then fade the new image src in front of it.
Example (untested code):
var img = $('#image img');
var div = $('<div></div>').css(
{
display:'inline',
width:img.width(),
height:img.height(),
backgroundImage:'url:('+img.attr('src')+')'
}).insertBefore(img).append(img);
img.css({opacity:0}).attr('src',newSrc);
img.fadeTo(500,1,function(){ img.insertAfter(div);div.remove(); });
JK
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of daveJay
Sent: Monday, June 23, 2008 5:23 PM
To: jQuery (English)
Subject: [jQuery] Fade in an Image by replacing the src
I'm trying to switch out an image by dynamically changing the source
value of an image. I tried using other methods of image replacement
but none of them work smoothly, there's major performance problems.
So anyway. Here's how I'm doing it right now.
j("#image img").fadeTo(500,0,function() {
j("#image img").attr({src : imgSrc});
}).fadeTo(500, 1);
I'm fading out the image, changing the source, and then fading it back
in again. Is there a way to fade the source change in?
Basically I want to fade this code in: j("#image img").attr({src :
imgSrc});
Is that possible? I tried the animate function but that only animates
in CSS changes and not html attribute changes (as far as I can tell)
Thanks,
-David
P.S. Here's the page I'm working on:
http://sandbox.exit42design.com/photography/index2.html
