animate opacity out, insert html, animate opacity in

Question

With my jquery I'm trying to make the transition from a message to a loading function easy on the eyes by animate the opasity of the message out, inserting the loading.gif and animating the opacity back in. It fails.

$('#powerSearchSubmitButton').click(function(ev) {
    startLoad();
    return false;
});
function startLoad() {
    $('.message').each(function(i) {
        $(this).animate({opacity: 0}, 500, function() {
            $(this).html("<img src=\"/content/pics/loadingBig.gif\" alt=\"loading\" style=\"opacity:0\"/>");
            $(this).animate({opacity: 1},500);
        });
    };
    return true;
};

When I leave out the .html() call, it works fine (except off course the image is not there; So I think that it is beacuse the html isn't inserted with opacity:0; But when I inserted it with style="opacity:0" it cannot fade back in...

What am I doing wrong?

Answer 1

Apply the animation to a container instead, or use the .css() method to set the opacity (inline styles might interfere with jQuery's ability to animate the corresponding properties).

Answer 2

Don't give the image style="opacity:0;" - it wont be visible while it's parent is hidden, and, as you've found out, it will remain at 0 opacity once the parent has faded back in.

You could also use jQuery's fadeIn and FadeOut functions instead of manually animating.

Answer 3

this works for me link text

Answer 4

Try this:

$(this).fadeOut(500, function() {
     $(this).html("<img src='content/pics/loadingBig.gif' alt='loading'/>");
    });
$(this).fadeIn(500);