title: jquery crossfade - struggling to get a jquery crossfade effect to work
body: <p>Here is my css to handle my background images - I have the width and height set in another portion of my style sheet, so thats not the problem:</p>
  
  <pre><code>#mainphoto.bg1 { background-image:url(../images/site/homepg_img_1.jpg); background-repeat:no-repeat;}
  #mainphoto.bg2 { background-image:url(../images/site/homepg_img_2.jpg); background-repeat:no-repeat;}
  #mainphoto.bg3 { background-image:url(../images/site/homepg_img_3.jpg); background-repeat:no-repeat;}
  #mainphoto.bg4 { background-image:url(../images/site/homepg_img_4.jpg); background-repeat:no-repeat;}
  #mainphoto.bg5 { background-image:url(../images/site/homepg_img_5.jpg); background-repeat:no-repeat;}
  #mainphoto.bg6 { background-image:url(../images/site/homepg_img_6.jpg); background-repeat:no-repeat;}
  </code></pre>
  
  <p>My HTML is pretty basic:</p>
  
  <pre><code> &lt;div id="mainphoto"&gt;
         &lt;div id="img-controls"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>And then finally the jquery:</p>
  
  <pre><code>// create slidearray
   var slideArray = ["bg1", "bg2", "bg3", "bg4", "bg5", "bg6"];
  
          // add first image to the mainphoto panel 
          $('#mainphoto').addClass(slideArray[0]);
  
          // add the image navigation
          $('#img-controls').append('&lt;ul id="mybg"&gt;&lt;/ul&gt;');
  
          // get the slidelength
          var slideLength = slideArray.length;
  
          // create the loop and stuff
          for(i=0; i &lt; slideLength; i++) {
              var slideText = i + 1;
              $('#mybg').append('&lt;li class="bg'+slideText+'"&gt;&lt;a href="#" rel="bg'+slideText+'"&gt;&lt;img src="images/site/img-bullets.png" border="0" &gt;&lt;/a&gt;&lt;/li&gt;');
          }
  
          $('#mybg li a').bind('click', function(){
              var numSlide = $(this).attr('rel');
              var img2rem = $('#mainphoto').attr('class');
  
              $('#mainphoto').fadeOut('normal', function(){
                  $('#mainphoto').addClass(numSlide).fadeIn('slow', function() {
                      $('#mainphoto').removeClass(img2rem);                           
                  });
              });
  
              $('#mybg li a').removeClass('active');
              $(this).addClass('active');
  
              console.log("numslide: " +numSlide);
              console.log("img2rem: " +img2rem);
  
          });
  </code></pre>
  
  <p>So what i want it to do is a crossfade effect between the css classes I've made.  But basically what it does is the initial image fades out and then the new image fades in.  But i want those animations to occur at the same time creating a crossfade effect.</p>
  
  <p>The next thing i want to do is make them autoplay so the user doesnt have to click on bullets to make the next image load.  I'm not quite sure how to do that.</p>
  
  <p>Most of the jquery sliders i've seen use a  tag for the image but i have to use the images as background images because i have navigation and others things going on in the page that would make it otherwise complicated to use  tags. I'm just a little confused at the moment how to make this crossfade effect happen.  Much appreciated in advance for any assistance.</p>