jQuery horizontal scrolling of text on mouseover

问题:

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!

回答1:

I prefer using setInterval. Maybe this fiddle will help.

回答2:

Don't do this! Scrolling text and doling information out like that is a huge, usability problem.

Use that and you will annoy 80% of the page's victims users, and most will not read/see, or will ignore, the title as well.

Write titles with the First 2 Words in mind, and display them like this if they absolutely must be too long. :

... where the "more" link pops up a div with the full title.

回答3:

Here you go

Working demo

Hope this helps you.

回答4:

There's a problem with your CSS! It's veery simple to make it work. Just adding one line of CSS:

white-space:nowrap;

Here it is, the complete code: http://jsfiddle.net/sMmkX/115/