title: changing javascript class background color
body: <p>I Have this Javascript....</p>
  
  <pre><code>&lt;script&gt;          
  $('.tile').on('click', function () {
  
      $(".tile").addClass("flipOutX");
      setTimeout(function(){
          $('metro tile-area-darkCrimson').css('background-color','#f36c20');
          $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");
      }, 2000);
  
  });
  &lt;/script&gt; 
  </code></pre>
  
  <p>and the class metro tile-area-darkCrimson is defined as in CSS....</p>
  
  <pre><code>.metro .tile-area-darkCrimson {
    min-width: 100%;
    height: 100%;
    background-color: #1f255b !important;
  
  
      transition: background-color .25s ease-in-out;
      -moz-transition: background-color .25s ease-in-out;
      -webkit-transition: background-color .25s ease-in-out;
  
  }
  </code></pre>
  
  <p>Why does the background color not change even though the rest of the function works ? Much help appreciated in advance.</p>
  
  <p>Cheers,
  Greg.</p>
  
  <p>EDIT ---------</p>
  
  <p>I now have this on advice from helpful people </p>
  
  <pre><code>&lt;script&gt;          
  $('.tile').on('click', function () {
  
      $(".tile").addClass("flipOutX");
      setTimeout(function(){
          $('.metro .tile-area-darkCrimson').addClass('color-red');
          $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");
      }, 2000);
  
  });
  &lt;/script&gt; 
  </code></pre>
  
  <p>and have added into the CSS this ...</p>
  
  <p>.color-red { background :#f36c20; }</p>
  
  <p>But still not working any more help really appreciated.</p>
  
  <p>Thanks,
  Greg.</p>