title: Jquery dialog with fadeIn/fadeOut and load issues
body: <p>My client wants a fadeIn/fadeOut image when loading interior pages. This is the page in question: <a href="http://angelynngrant.com/mei3/ouragency.html" rel="nofollow">http://angelynngrant.com/mei3/ouragency.html</a></p>
  
  <p>Problems:
  (1) fadeIn does not work;
  (2) fadeOut works, but leaves a ghosted rectangle before 'destroy';
  and (3) often onload (and on refresh), the modal appears in the top left of corner of the window and then "hops" in place to fadeOut.</p>
  
  <p>I've adjusted my css to make most elements of the dialog box disappear and/or be transparent (e.g. .ui-dialog .ui-dialog-titlebar {visibility:hidden; background:transparent;}).</p>
  
  <p>I have the load in the header:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;                                         
      $(window).load(function() {                         
          $("#ModalSlide7").dialog({
              width: 564,
              height: 808,
              modal: true
          }); 
          $(".ui-dialog-titlebar").hide(); 
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And I have the rest of the modal in the body:</p>
  
  <pre><code>&lt;div id="ModalSlide7"&gt;
      &lt;img id="slide7" src="images/7.jpg" alt="Game of Authors vintage game"&gt;
  
      &lt;script type="text/javascript"&gt;
          $('#slide7').fadeIn(3000, function() {
              $('#slide7').fadeOut(3000).queue(function (next) {
                  $('#ModalSlide7').dialog('destroy').remove();
              });
          });
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p>(Note: Site design/styling is not finished.)</p>