title: Scrolling text which is too long with jquery
body: <p>I am trying to create a music player/centre online.</p>
  
  <p>I have a player that plays the music and displays the current track:</p>
  
  <p><img src="https://i.stack.imgur.com/Y1vY7.png" alt="The Player"></p>
  
  <p>As you can see from th title of the song it is too long for the div. What i would like to do is scroll the text and reset it an rescroll etc.</p>
  
  <p>I have attempted this with the below code:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="top-bar"&gt;
  &lt;div id="player-container"&gt;
          &lt;div id="player"&gt;
            &lt;div id="level1"&gt;
              &lt;div class="current-track"&gt;&lt;h1&gt;&lt;span id="title"&gt;Party All Night (Sleep All Day) -&lt;/span&gt; Sean Kingston&lt;/h1&gt;&lt;/div&gt;
              &lt;div class="add-to-playlist"&gt;&lt;/div&gt;
              &lt;div class="share"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="clearfix"&gt;&lt;/div&gt;
            &lt;div id="level2"&gt;
              &lt;div class="current-time"&gt;0:00&lt;/div&gt;
              &lt;div class="progress"&gt;&lt;span id="slider"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class="total-time"&gt;3:43&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>$(function() {
      var scroll_text;
      $('div.current-track').hover(
  
      function() {
          var $elmt = $(this);
          scroll_text = setInterval(function() {
              scrollText($elmt);
          }, 5);
      }, function() {
          clearInterval(scroll_text);
          $(this).find('div.current-track h1').css({
              left: 0
          });
      });
  
      var scrollText = function($elmt) {
          var left = $elmt.find('div.current-track h1').position().left - 1;
          left = -left &gt; $elmt.find('div.current-track h1').width() ? $elmt.find('div.current-track').width() : left;
          $elmt.find('div.current-track h1').css({
              left: left
          });
      };
  
  });​​
  </code></pre>
  
  <p>Any pointer would be appriciated</p>
  
  <p>Here is a jsfiddle for you guys:  <a href="http://jsfiddle.net/Dn6jx/1/" rel="nofollow noreferrer">JSfiddle</a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Could anybody tell me:</p>
  
  <ol>
  <li><em>How to make this happen automatically?</em> <strong>Done</strong></li>
  <li><em>How to slow the scrolling?</em> <strong>Done</strong></li>
  </ol>
  
  <p>Here is the updated jsfiddle for you guys:  <a href="http://jsfiddle.net/Dn6jx/14/" rel="nofollow noreferrer">JSfiddle</a></p>