How to cycle a single div in an element with jQuer

Question

I am trying to see if the following is possible:

I want to be able to cycle a single div within an element continuously [so the start of the div is by the end of the same div as it cycles.]

This doesn't have to be an existing plugin. I would prefer to not clone the div if possible. The div's width will be set via javascript prior to cycle but might be adjusted in small amounts.

I would appreciate any ideas!

Answer 1

jsBin demo

jQuery:

$('.scroller').each(function(){
  $(this).find('img').clone().appendTo($(this));
});

(function move(){
  $('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move);
})();

HTML:

  <div class="scroller">
    <img src="" alt="" />
  </div>

CSS:

.scroller{
  width:310px;
  height:80px;
  white-space:nowrap;
  word-spacing:-1em;
  overflow:hidden;
  margin:30px;
}
.scroller img{
  display:inline; 
}

It will make clones only once. Than my jQuery script will create a loop that will just play with the scrollLeft() element property.

N.B: this is just a plain example, you could make 310px be dynamically calculated, but that's another story, let's keep it simple.

Answer 2

What about the marquee plugin?

Demo
Docs

Note that first example in the Demo, that scrolls left, if you set the width of the container to the same size or smaller than your content to scroll it will appear to cycle fluidly.