title: Fading between two classes in jquery
body: <p>I would like to be able to fadeout this class</p>
  
  <pre><code>&lt;h2 class="care-home-fees"&gt;&lt;a title="Care Home Fees" href="#"&gt;Text&lt;/a&gt;&lt;/h2&gt;
  </code></pre>
  
  <p>and fade in this</p>
  
  <pre><code>&lt;h2 class="care-home-fees-over"&gt;&lt;a title="Care Home Fees" href="#"&gt;Text&lt;/a&gt;&lt;/h2&gt;
  </code></pre>
  
  <p>Notice there are two separate images</p>
  
  <p>Here is my current markup which doesnt seem to work</p>
  
  <pre><code>$(document).ready(function(){  
  
  $("h2.care-home-fees").hover( 
    function () {
      $(this).addClass("care-home-fees-over");
    },
    function () {
      $(this).removeClass("care-home-fees");
    }
  );  
  
  });
  </code></pre>
  
  <p>and the button printed before any change</p>
  
  <pre><code>&lt;h2 class="care-home-fees"&gt;&lt;a title="Care Home Fees" href="#"&gt;Text&lt;/a&gt;&lt;/h2&gt;
  </code></pre>