title: javascript syntax for class issue
body: <p>Ok I have this javascript...</p>
  
  <pre><code>$(document).ready(function() {
      $('#holder').toggleClass("visible");
  
      $('a.link').click(function(event) {
          // Over-rides the link
          event.preventDefault();
          // Sets the new destination to the href of the link
          newLocation = this.href;
          color = $(this).data("color");
          $('body').css('background-color', color );
          $('#holder').css('opacity','0' );
          // Delays action
          window.setTimeout(function() {
              // Redirects to new destination
                  window.location = newLocation;
          }, 250);
      });
  
      $('h1').click(function(event) {
          $('#holder').toggleClass("visible");
      });
  
  });
  </code></pre>
  
  <p>and I have this html .......</p>
  
  <pre><code>&lt;body class="landingpage"&gt;
  
      &lt;h1 class="begining"&gt;Page Tansitions&lt;/h1&gt;
      &lt;p&gt;&lt;a class="link" href="/one.html" data-color="#f36c20"&gt;Page One&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;&lt;a class="link" href="/two.html" data-color="#edcd40"&gt;Page Two&lt;/a&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>... That's all fine and dandy and the js does its thing and changes the color of the page which is ref 'body' in the code above....  </p>
  
  <p>I don't want to change the 'body' tag of a html page I want to change a class something like .metro .tile-area-darkCrimson  as referenced in my css and   in my html...  I can't for the life of me figure out how to present it in javascript can someone please help.</p>
  
  <p>Cheers,
  Greg.</p>
  
  <p>.... Further to that I have attempted to integrate it into a more complex structure that now doesn't seem to work ... I have   link for the html where I am using a tile class and animation that do work without any changes.....</p>
  
  <pre><code>&lt;a class="tile double bg-tile1color live animated flipInX link" data-color="#f36c20" data-role="live-tile" data-effect="slideUp" data-click="transform"&gt;
  </code></pre>
  
  <p>I am also using a javascript trigger when the user clicks on this tile and that is where I want to slot in the aforementioned javascript that changes the page color..I am guessing the javascript is overiding the transition....</p>
  
  <pre><code>&lt;script&gt;          
  $('.tile').on('click', function () {
  
      $(".tile").addClass("flipOutX");
      setTimeout(function(){
          $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");
      }, 2000);
  
  });
  &lt;/script&gt; 
  </code></pre>