javascript - 悬停时如何制作选取框 - 文本滚动和无限循环，悬停 - 回到起始位置？

Question

这是我的 jsfiddle http://jsfiddle.net/9XdV7/ , hover in - 文本滚动和无限循环，out - 回到开始位置时如何？现在它不能无限循环滚动

for (var i = 0; i < $('.list').length; i++) {
    var this_el = $('.list').eq(i);
    var interval = null;

    $(this_el).hover(function() {
      var that = $(this);
      var this_indent = 0;

      interval = setInterval(function(){
        this_indent--;
        if (this_indent == -($(that).find('.text').width())) {
          clearInterval(interval);
          this_indent = 0;

          // how to loop scroll
        }
        $(that).css('text-indent', this_indent);
      },20);

    }, function() {
        clearInterval(interval);
        $(this).css('text-indent', 0);
    });
}

HTML 和 CSS

<div class="list"><div class="text">stringstringstringstring</div></div>
<div class="list"><div class="text">stringstringstring</div></div>
<div class="list"><div class="text">stringstringstringstring</div></div>    

.list {
width: 100px;
overflow: hidden;
white-space:nowrap;

height: 15px;
background-color: red;
margin: 10px;
}
.text {
text-align: left;
background-color: purple;
display: inline;
}

Answer 1

这是您要找的吗？ Fiddle

1. 我使用 mouseenter 和 mouseleave 而不是悬停。 $(elem).on("mouseenter",function() { ... });
2. 我将属于该元素的标识符存储在它的数据中:$(this).data("interval",interval);

3. 我加了

   if(this_indent < -150) {
      this_indent = 100;
   }
   

   使效果无限。 -150 是我从开发者工具中得到的一个值。 100 是纯测试。