title: Jquery changing background color with smooth transition
body: <p>I figured out how to change my background color with Jquery upon clicking a button, but I don't know how to ease the transition. I have tried the .css method in order to add the transition. It doesn't work. </p>
  
  <p>Here is my Jquery to add the new color to the background, it works:</p>
  
  <pre><code>$("#playbtn").click(function(){
    $("#container").css("background", "#3953A0");
    $("#container").css("background", "-webkit-linear-gradient(to left, #3953A0, #2A3C70)");
    $("#container").css("background", "linear-gradient(to left, #3953A0, #2A3C70)");
    $("#container").css("background", "-moz-linear-gradient(to left, #3953A0, #2A3C70)");
    $("#container").css("filter", "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3953A0', endColorstr='#2A3C70',GradientType=1 )");
  }); 
  </code></pre>
  
  <p>my basic #container css:</p>
  
  <pre><code>#container {
    width: 100%;
    min-height: 100%;
    position: fixed;
    background: #00C9FF; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #2A3C70 , #718DE2); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #2A3C70 , #718DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    background: -moz-linear-gradient(left, #2A3C70 , #718DE2); /* For Firefox 3.6 to 15 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2A3C70', endColorstr='#718DE2',GradientType=1 ); /* IE6-9 */
  }
  </code></pre>
  
  <p>Hope you guys can help me!</p>