鼠标悬停时jQuery水平滚动文本

Question

基于以下图片，我真的很感激一些帮助：

此外，我正试图在div.title-holder内完成（无限）滚动绿色文本。我的目标是仅在 mouseOver 上开始滚动，然后在div.container的 mouseOut 上重置。我认为这将是一个简单的任务与一些CSS和jQuery，但显然不是这样。这是我的HTML，CSS和随附的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>

相关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' });
    }
);

现在，除了2个问题外，这个工作正常：

1. 无法无限滚动，
2. 滚动动作非常非常跳跃/紧张

我真的希望有人在过去有类似的要求，并且可以为我解释这件事。 谢谢！

Answer 1

我更喜欢使用setInterval。也许这fiddle会有所帮助。

Answer 2

不要这样做！滚动文本和推文信息就像是huge，usability problem。

使用它，你会惹恼80％的受害者用户，大多数人也不会阅读/看到或忽略标题。

在考虑the First 2 Words的情况下编写标题，如果它们绝对必须太长，则显示如下。 ：

...“更多”链接弹出一个带有完整标题的div。

Answer 3

你去吧

正在使用 demo

希望这会对你有所帮助。

Answer 4

你的CSS有问题！让它工作很简单。只需添加一行CSS：

white-space:nowrap;

这是完整的代码：http://jsfiddle.net/sMmkX/115/