How to make marquee when hover in - text scroll and infinite loop, out - back to start position?

Question

here is my jsfiddle http://jsfiddle.net/9XdV7/, how to make when hover in - text scroll and infinite loop, out - back to start position? now it can't infinite loop scroll

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;
}

`setInterval` and `clearInterval` are not part of jQuery, but part of JavaScript. Calling them as a jQuery function will not work. — ZiNNED, Jul 10 '14 at 14:28

score 2 · Accepted Answer · answered Jul 10 '14 at 14:54

2

Is this what you're looking for? Fiddle

I used mouseenter and mouseleave instead of hover. $(elem).on("mouseenter",function() { ... });
I stored the identifier belonging to the element in its data: $(this).data("interval",interval);
I added
```
if(this_indent < -150) {
   this_indent = 100;
}
```
to make the effect infinite. -150 is a value I got from the developer tools. 100 is pure testing.

answered Jul 10 '14 at 14:54

SVSchmidt

6,269
2
26
37

Thanks for description!! – user1775888 Jul 10 '14 at 15:03

score 0 · Answer 2 · edited May 23 '17 at 12:11

This still wants some tweaking for determining the point at which to loop, but I think it's basically what you want:

$(function() {
    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.width() * -1)
                this_indent = that.width();
            that.css('text-indent', this_indent);
          },20);            

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

});

It's looping based on the width of the div, rather than the actual length of the text. If you want the text width, you could look here: Calculating text width

How to make marquee when hover in - text scroll and infinite loop, out - back to start position?

2 Answers2