Question

I would really appreciate some help based on the following image:

Furthermore, I am trying to accomplish (infinite) scrolling of the green text within div.title-holder. My aim is for the scrolling to begin only on mouseOver and then reset on mouseOut of div.container. I thought this would have been a simple task with a bit of CSS and jQuery, but apparently not so. Here is my HTML, CSS and accompanying JS:

<div class="container">
    <div class="title-holder">
        <a href="somelink.html">long text that needs to scroll</a>
    </div>
    <img src="someimage.jpg" />
</div>

Relevant CSS:

div.title-holder {
  width:130px;
  height:20px;
  overflow:hidden;
  white-space:no-wrap;
  text-align:center;
}
div.title-holder a {      
}

jQuery JS:

$('div.container').hover(
    function () {
        var scrollingWidth = $(this).find('div.title-holder').find('a').width();
        $(this).find('div.title-holder').stop(true, true).animate({scrollLeft: scrollingWidth}, { duration: 5000, easing: 'swing' });
    },
    function () {
        $(this).find('div.title-holder').stop(true, true).animate({scrollLeft: 0}, { duration: 5000, easing: 'swing' });
    }
);

Now, this works okay, except for 2 problems:

1. It does not scroll infinitely, and
2. The scroll action is very very jumpy/jittery

I really do hope that someone has had a similar requirement in the past and can shed some light on this matter for me. Thank you!

Answer 1

I prefer using setInterval. Maybe this fiddle will help.