Smooth zanikanie obrazu, zmień src i zanikać w jQuery

Question

Próbuję wykonać następujące czynności:

na link kliknij:

1.) zanikają takie img

2.) zmienić src obecnie ukrytego obrazu

3.) gdy img src z nowym zakończeniu załadunku, Fade In

minimalnie, chciałbym zobaczyć gładką znikną z jednego obrazu i rozjaśniania z nother (w ramach tego samego znacznika img zmieniając SRC)

Ostatecznie chciałbym:

1.) zanikają takie img

2.) wykazywać animowany gif "Ładowanie obrazu"

3.) zmienić src obecnie ukrytego obrazu

4.) Ukryj animowany gif "ładowanie obrazu"

5.), gdy img src z nowym kończy loa ding, zanikanie w

Dzięki.

Oto, czego próbowałem do tej pory. Wydaje się, że wykonuje kilka błysków, ale dopiero po zmianie src (przed zanikiem). Dziwne zachowanie.

$("#Image").fadeOut(); 
$("#Image").attr("src", NEW_IMAGE_SRC); 
$("#Image").fadeIn(); 

#Image jest tag IMG

Answer 1

Spróbuj tego:

$('.click').click(function() { 
    $('img.class').fadeOut(300, function(){ 
     $(this).attr('src','new_src.png').bind('onreadystatechange load', function(){ 
     if (this.complete) $(this).fadeIn(300); 
     }); 
    }); 
});