animate opacity out, insert html, animate opacity in
12,237
Try this:
$(this).fadeOut(500, function() {
$(this).html("<img src='content/pics/loadingBig.gif' alt='loading'/>");
});
$(this).fadeIn(500);
Author by
Boris Callens
Senior .net programmer. Belgium(Antwerp) based. linked-in My real email is gmail.
Updated on June 04, 2022Comments
-
Boris Callens almost 2 years
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 withopacity:0;
But when I inserted it withstyle="opacity:0"
it cannot fade back in...What am I doing wrong?
-
Boris Callens over 15 yearsthanks, fadeIn and fadeOut are indeed exactly the same. Internally they use the same as I did there.
-
Boris Callens over 15 yearsthe animation already IS on a container ( div with class "message").
-
Boris Callens over 15 yearsYes, if you check previous answers you can see that I tried that. It still gives me an IN YOUR FACE load of the loading gif in all browsers but FF