title: Set child element attr using an attribute of the parent using jquery
body: <p>I've got the following html:</p>
  
  <pre><code>&lt;ul id="clients-strip"&gt;
      &lt;li&gt;
      &lt;a href="http://example.com/case-studies/" data-colour="/images/made/assets/images/article-images/client-colour.png"&gt;
          &lt;img src="/images/made/assets/images/article-images/client-grayscale.png" alt="Client" width="59" height="35"&gt;  
      &lt;/a&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>and need to basically swap the  img src with the parent 'a' elements "data-colour" attribute when the 'a' element is hovered over (i'd like to fade out the old att and fade in the new too)</p>
  
  <p>My jquery is not going too well :(</p>
  
  <pre><code>$('ul#clients-strip li a').hover(function(){
          $(this.' img').attr('src', this.data-colour);
      });
  </code></pre>
  
  <p>Any ideas as to what i'm doing wrong? Also, is it even going to be possible to essentially fade out one image and fade in another in the way that i'm trying here?</p>