title: how to change background images with fade
body: <p>so far (with the help of this comm :)) I created a full viewport background, thats able to switch on click. </p>
  
  <p>Since I'm a beginner I  have two questions:</p>
  
  <p>1) Is the code "good", or did I wrote it to complicated?</p>
  
  <p>and the Mainquestion:</p>
  
  <p>How can I put a fade effect into my code? Now it's kinda ugly, because the images are loading slow (stuttering). I imagine something like this: </p>
  
  <p><strong>Image--Click--Fading black--Fading in new Image--Click--Fading black---Fading in new Image--..</strong></p>
  
  <p>Here is the code I wrote:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="t1"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.t1 {
      background: url(pics/homescreen.JPG) no-repeat center center fixed ;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(function () {
      var y = 1;
      $('.t1').click(function () {
          var x = ['url(pics/screen1.jpg) no-repeat center center fixed',
              'url(pics/screen2.jpg) no-repeat center center fixed',
              'url(pics/schild.jpg) no-repeat center center fixed'
          ]
          $('.t1').css('background', x[y]);
          $('.t1').css('background-size', 'cover');
          if (y == 2) {
              y = 0;
          } else {
              y = y + 1;
          }
      });
  })
  </code></pre>