title: how to do a background-image transition?
body: <p>I want to create a day and night background with transition.
  This is what i have so far: <a href="http://jsfiddle.net/4csF3/" rel="nofollow">DEMO</a>.</p>
  
  <p>This is how i change day and night, but i can't fade them into each other</p>
  
  <p>CSS:</p>
  
  <pre><code>.day
  {
      background-image: linear-gradient(orange,lightyellow);
  }
  .night
  {
      background-image: linear-gradient(#111111,darkblue);
  }
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>function dayAndNight(){
      if($('#achtergrond').attr('class')== "night")
              $('#achtergrond').toggleClass('night day');
      else if($('#achtergrond').attr('class')== "day")
              $('#achtergrond').toggleClass('day night');
  }
  
  setInterval(function(){dayAndNight();},2000);
  </code></pre>
  
  <p>how can i fade day into night and night into day?</p>