title: How to replace div content with animation in JQuery?
body: <p>I need to change the content of the div (only 1 image element) with animation. Would be good if we can do it with according to direction variable. It should work as slideshow.</p>
  
  <pre><code>var img = $("&lt;img /&gt;").attr('src', imgUrl)
  .load(function() {
      if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
          alert('broken image!');
      } else {
          $("#map").html(img);
      }
  }); 
  </code></pre>
  
  <p>I tried to use this solution, but it changes the layout and it's just fading animation. </p>
  
  <pre><code>$('#map').fadeOut("slow", function(){
      var div = $("&lt;div id='map'&gt;"+img2+"&lt;/div&gt;").hide();
      $(this).replaceWith(div);
      $('#map').fadeIn("slow");
  });
  </code></pre>
  
  <p>Only JQuery scripting solutions are needed. Thanks !</p>
  
  <p>UPD: Can we fade in the new image WHILE fading away old one?</p>