that's a really good idea, however that approach wouldn't work since
the image is dynamically cropped and resized with the browser window,
you can't crop and resize a background-image =(
the fade to black works rather nicely but it would be nice to have a
direct dissolve.
On Jun 23, 9:09 pm, "Jeffrey Kretz" <[EMAIL PROTECTED]> wrote:
> 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
