title: jquery background image change fade out
body: <p>I'm working on some kind of jquery slider. It's almost standard NivoSlider, but i want to change basic images with my own controls.</p>
  
  <p>So I have something like this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="slider" class="nivoSlider"&gt;
     &lt;img src="img/slider/start1.jpg"  alt="" /&gt;
     &lt;img src="img/slider/start2.jpg"  alt=""/&gt;
     &lt;img src="img/slider/start3.jpg"  alt="" /&gt;
  &lt;/div&gt;
  
  &lt;!--controls--&gt;
  
  &lt;ul class="lista"&gt;
     &lt;li class="first"&gt;&lt;/li&gt;&lt;!--thumbnail here on background image--&gt;
     &lt;li class="second"&gt;&lt;/li&gt;
     &lt;li class="third"&gt;&lt;/li&gt;  
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When you click on e.g. second li element, you change main image in slider and thumbnail. The first part works excellent, the second part looks like this (I am a beginner in javascript):</p>
  
  <pre><code>    $('.first').click(function(){
      $(this).css('background', 'url(img/slider/1min_a.jpg)');
      $('.second').css('background', 'url(img/slider/2min.jpg)');
      $('.third').css('background', 'url(img/slider/3min.jpg)');
      }); 
  
     $('.second').click(function(){
      $(this).css('background', 'url(img/slider/2min_a.jpg)');    
      $('.first').css('background', 'url(img/slider/1min.jpg)');
      $('.third').css('background', 'url(img/slider/3min.jpg)');
      });     
  
     $('.third').click(function(){
      $(this).css('background', 'url(img/slider/3min_a.jpg)');
      $('.first').css('background', 'url(img/slider/1min.jpg)');
      $('.second').css('background', 'url(img/slider/2min.jpg)');
      }); 
  </code></pre>
  
  <p>And I have two questions:<br>
  1. How can I make it as simple as possible?<br>
  2. How can I add fadeOut / fadeIn effect to prevent image "blink" on background change?</p>