How to mimic marque scroll behavior in jquery?

Question

<marquee behavior="scroll" direction="left">text</marquee>

Example

I want to add the above behavior to my text div if its content overflows its width. I can scroll it to the right, but how can I make the letters disappear when it reaches the right end and appear from the left end?

What I have now:

$.fn.scrollForLongText = function() {
  var rightEnd = this.prop('scrollWidth');
  if ($(this).prop('scrollWidth') > $(this).innerWidth()) {
    $(this).animate({scrollLeft:rightEnd}, 7000, function() {
      console.log("reached the end! what to do?");
    });
  }
}

Answer 1

Here's an example FIDDLE

<div class="marque"><span class="content">Here's some scrolling text...</span></div>

---

.marque {
  position: relative;
  width: 800px;
  height: 20px;
  overflow: hidden;
  border: 1px solid #eee;
}
.content {
  position: absolute;
}

---

$(function() {

  $('.content').css({ left: $('.marque').innerWidth() + 'px' });

  setInterval(function() {
    $('.content').animate({ left: $('.content').text().length*8 + 'px' }, 10000, 'linear', function() {
      $(this).css({ left: $('.marque').innerWidth() + 'px' });
    });
  });

});

$('.content').text().length*8 explained is text length of .content span * 8px character width.