如何模仿jquery中的字幕滚动行为？

Question

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

Example

如果内容溢出其宽度，我想将上述行为添加到我的文本div中。我可以向右滚动它，但是当它到达右端并从左端出现时，如何让字母消失？

我现在拥有的：

$.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

以下是 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解释的是.content span * 8px字符宽度的文字长度。