title: Trying to fade and slide text out of initials on mouse over with jQuery
body: <p>I'm trying to create an effect with jQuery where on mouse over of my initials on the page in the header, the div they are in expands (using jQuery animate) and the text of my full name fades in from each initial.</p>
  
  <p>I have tried a variety of things but am not sure what is the best way to do this. I'm a bit stuck. I'm currently trying to get it going by having the initials of my name "OW" in two separate divs and then the remainder of my name to make up "wen" and "illiams" in between those initals. Like so:</p>
  
  <pre><code>    &lt;div class="initialF inlinediv"&gt;O&lt;/div&gt;
      &lt;div class="fullF inlinediv"&gt;wen&lt;/div&gt;
      &lt;div class="initialL inlinediv"&gt;W&lt;/div&gt;
      &lt;div class="fullL inlinediv"&gt;illiams&lt;/div&gt;
  </code></pre>
  
  <p>I thought it would work to use jQuery slideLeft and .fadeIn to get the text to slide in from the left as well as fading to look like the text is emerging from the initials but the animations was jumpy and would go onto a second line while the div was still expanding. I am using the below jQuery to detect the mouseIn/Out events:</p>
  
  <pre><code>&lt;script&gt;
  $(".brand").mouseenter(function() {
  $('.brand').animate({width: '160px'});
  $('.fullF').fadeIn("slow");
  });
  
  $(".brand").mouseout(function() {
  $('.brand').animate({width: '36px'});
  $('.fullF').fadeOut("slow");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The alternatives I have tried were using jquery.lettering.js to help with it but there seemed to be some issues with that. Any suggestions to push me in the right direction would be useful and my site with a partially working example is here:</p>
  
  <pre><code>http://192.241.203.146/
  </code></pre>