jquery image gallery fadeIn

Question

Got an annoying problem and cannot seem to rectify...

The following will fade and image out, the callback will then remove the image and insert a new one, on load of the new image it should fade back in... but it seems to be fading back in super fast or rather just showing the new image..

    if($('#gallery-image img').css('opacity') == 1){
        $('#gallery-image').children('img').fadeOut(sawdays.gallery.transitionTime , function(){
            $(this).remove();
            $('#gallery-image').append(newImg);
            $('#gallery-image img').load(function(){
                $(this).fadeIn(sawdays.gallery.transitionTime);
            });
        });
    }

I was wondering if anyone could see anything i was doing wrong with it... i've already spent too much time on this :S

var newImg = $('').attr({ 'src':src , 'height':height , 'width':width , 'style':style }); — John, Jul 11 '12 at 13:48

score 0 · Answer 1 · answered Jul 11 '12 at 09:55

0

try this:

 if ( $('#gallery-image img').css('opacity') == 1 ) {
        $('#gallery-image').find('img').fadeOut(sawdays.gallery.transitionTime , function(){
           $(this).replaceWith(newImg);
           $('#gallery-image img').fadeIn(sawdays.gallery.transitionTime);
        });
  }

answered Jul 11 '12 at 09:55

undefined

136,817
15
158
186

Ah, nice function i did not know about... replaceWith... thanks. However the fadeIn is still not listening to the fadeIn parameter. I have even piped it to a load function (hopefully meaning it will fadeIn when the image has loaded but no joy)... see the edit above – John Jul 11 '12 at 13:42
I was using the load so the fade in would only happen once the image had loaded properly... is this not needed? – John Jul 11 '12 at 13:46
@John I hope this can help you http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded – undefined Jul 11 '12 at 13:52

jquery image gallery fadeIn

1 Answers1