title: How to make a button that slides out and shows the full text onmouseover?
body: <p>So, I see a few things that seem like they might be relevant to this question, but they aren't similar enough for me to be able to use their answer.</p>
  <p>Anyway, basically, I want to have a button with a dollar sign in my sidebar.
  When the mouse is hovered over it, I want it to smoothly slide out and have the word &quot;Donate&quot; on it, keeping the $ on the right side of the button. Then, when the mouse is no longer hovering over it, I want it to slide back in.</p>
  <p><strong>Example:</strong></p>
  <p>Mouse not over:</p>
  <p><strong>$</strong></p>
  <p>Mouse over:</p>
  <p>e <strong>$</strong></p>
  <p>te <strong>$</strong></p>
  <p>(slides all the way out)</p>
  <p>Donate <strong>$</strong></p>
  <p>Except with real buttons.
  <strong>Note:</strong> If it can't use an image as the button, that's fine. It'd be nice if I could, but honestly it doesn't matter in the long run, as I can probably make the HTML button look just as nice.</p>
  <p>This seems like a really simple question, so I really hate to ask about it, but I simply can't figure it out.</p>
  <p><strong>Edit:</strong></p>
  <p>Well, here's one thing I tried.</p>
  <p>In head tag:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function()
      {
      $(&quot;#imgAnimate1&quot;).hover(
          function()
          {
              $(this).attr(&quot;src&quot;, &quot;donateB.gif&quot;);
          },
          function()
          {
              $(this).attr(&quot;src&quot;, &quot;donateA.png&quot;);
          });
  &lt;/script&gt;
  </code></pre>
  <p>Where the image is:</p>
  <pre><code>&lt;div id=&quot;sidebar&quot;&gt;
  &lt;img id=&quot;imgAnimate1&quot; src=&quot;Images/donateA.png&quot; alt=&quot;&quot; &gt;
  &lt;/div&gt;
  </code></pre>
  <p>Result (WHILE hovering mouse over it):
  <a href="http://prntscr.com/45js7q" rel="nofollow noreferrer">http://prntscr.com/45js7q</a></p>