title: animate opacity out, insert html, animate opacity in
body: <p>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.</p>
  
  <pre><code>$('#powerSearchSubmitButton').click(function(ev) {
      startLoad();
      return false;
  });
  function startLoad() {
      $('.message').each(function(i) {
          $(this).animate({opacity: 0}, 500, function() {
              $(this).html("&lt;img src=\"/content/pics/loadingBig.gif\" alt=\"loading\" style=\"opacity:0\"/&gt;");
              $(this).animate({opacity: 1},500);
          });
      };
      return true;
  };
  </code></pre>
  
  <p>When I leave out the <code>.html()</code> 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 <code>opacity:0;</code> But when I inserted it with <code>style="opacity:0"</code> it cannot fade back in...</p>
  
  <p>What am I doing wrong?</p>